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 youd 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 forms 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 sitefor
instance, instructions like, The yellow fields are required would be a big no-no.

Get The CSS Anthology, Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.