The CSS Anthology, Second Edition

The CSS Anthology180

We can change the look of this form by creating CSS rules for the form, input,

textarea, and select elements:

elements.css

form {

border: 1px dotted #aaaaaa;

padding: 0.5em;

}

input {

color: #00008B;

background-color: #ADD8E6;

border: 1px solid #00008B;

}

select {

width: 100px;

color: #00008B;

background-color: #ADD8E6;

border: 1px solid #00008B;

}

textarea {

width: 200px;

height: 40px;

color: #00008B;

background-color: #ADD8E6;

border: 1px solid #00008B;

}

The new look is depicted in Figure 6.2.

Discussion

As you’d expect, the definition of rules for the HTML elements form, input,

textarea, and select will affect any instances of these elements in a page to which

your style sheet is attached. You can use a variety of CSS properties to change the

appearance of a form’s fields. For example, CSS allows you to change almost every

aspect of an <input type="text"> field:

<input type="text" name="name" id="name" />

181 Forms and User Interfaces

input {

color: #00008B;

background-color: #ADD8E6;

border: 1px solid #00008B;

font: 0.9em Arial, Helvetica, sans-serif;

padding: 0.2em;

width: 200px;

}

Figure 6.2. The form displaying differently following the application of CSS

Safari and Background Colors

Unfortunately, as of this writing, Safari does not support the application of back-

ground colors to all form fields (text fields and textarea elements work, but

other controls, such as buttons and drop-down menus, do not).

For this reason, as well as the fact that not all users can distinguish colors well,

you should never rely on field background colors for the usability of your site—for

instance, instructions like, “The yellow fields are required” would be a big no-no.