HTML and CSS Reference
In-Depth Information
These styles set up the basic form layout that I'm using in both exercises. Next, I tweak
the appearance of my input fields:
input[type=”text”], select, textarea {
width: 300px;
font: 18px Verdana;
border: solid 2px #666;
background-color: #ada;
}
The rule above applies to three different selectors:
select
,
textarea
, and
input[type=”text”]
. The third selector is a bit different than the ones you've seen thus
far. It is what's known as an attribute selector, and matches only
input
tags with the
value of
text
for the
type
attribute. This sort of selector can be used for any attribute. In
this case, I'm using it to avoid applying this rule to Submit buttons, radio buttons, and
check boxes. One catch is that the attribute has to exist, so I had to add
type=”text”
to
my
<input>
tag. The selector won't match if you leave out the attribute and go with the
default value.
Next, I add more styles that are related to the required fields. In the previous exercise, I
applied the required class to the labels but I've moved it out to the
<div>
s this time
around, so that I can apply it to my labels and to my form fields. The labels are still
bolded, but now I use the nested rule shown next. Also note that I apply the style only to
label.required
rather than to
label
. That's so that the other labels (used for radio but-
tons and check boxes) aren't bolded.
div.required label.field {
font-weight: bold;
}
div.required input, div.required select {
background-color: #6a6;
border: solid 2px #000;
font-weight: bold;
}
Finally, I have made some enhancements that make it clearer which fields are required.
In the original form the labels for required fields were displayed in boldface. In this
example, that remains the case. However, I moved the
required
class to the enclosing
div so that I can also use it in selectors that match the form fields themselves. I also
styled required input fields and select fields with a dark green background color, bold
type, and a different color border than optional fields have. After the style sheet is set up,
all we have to do is make sure that the
class
attributes of our tags are correct. The full
source code for the page, including the form updated with classes, follows:
