HTML and CSS Reference
In-Depth Information
This goes for the other properties as well. Where would you apply a back-
ground color to a radio button—inside the circle or outside and behind
the circle in the rest of the box? Is the line between the text space and
the little handle of a select element a border? How many backgrounds
and borders are there in a file input field that is often represented as
something that looks like a text input plus a button? What about all
those new input types like sliders in HTML5?
These are the questions that give browser developers (and in turn web
developers) migraines.
For the most consistent appearance, you should probably avoid borders
and background colors and avoid background images for radio buttons
and check boxes. (Figure 11.2 showed examples of browser differences.)
On the other hand, you can do interesting things with borders, back-
ground colors, and background images for the other field types. In the
next example, a background image on a text input is used to create the
feeling of depth (
Figure 11.3
). I've added background color change when
the element is in focus for a highlight.
input[type="text"] {
padding: 4px;
width: 100px;
border: 1px solid #000;
background: #fff url(images/inner_shadow.png) no-repeat
➥
left top;
}
input[type="text"]:focus {
background-color: #fff335;
}
Figure 11.3
A text input with
a background
image.
