HTML and CSS Reference
In-Depth Information
CHAPTER 11
■ ■ ■
Styling Forms
U
sing the power of CSS, forms can be styled in many interesting and creative ways to enhance
not only their aesthetics, but also their usability. However, forms are also the single area where
default styling and differences in CSS support are the most inconsistent across browsers. There
are two main components to forms and CSS: laying out entire forms and styling individual form
widgets. Let's start with the latter.
Styling Form Widgets
The degree to which individual form widgets can be styled varies greatly from browser to browser.
For example, Safari does not allow for CSS borders or backgrounds on
input
elements (although
this may be changing in the near future), but Firefox does. Web designers often find this frus-
trating. However, there are two schools of thought on whether browsers
should
let CSS authors
modify the appearance of form widgets. Whereas smart designers can use CSS's widget styling
to create usable forms that better integrate with the overall design of a site, less savvy CSS authors
may abuse the power to the point where a form is rendered unusable. Also, users come to expect
their default form widgets and can be confused by controls that appear unusual to them.
Either way, the important thing to understand when styling form elements is that it's very
likely users of some browsers will see the standard, default form widgets supplied by their
operating system and/or browser instead of your custom-styled versions. You should ensure
that your design works well with or without the custom styles you are applying.
It's also important to understand that the default styles of button, text fields, radio but-
tons, check boxes, and other form element vary drastically from one browser and platform to
the next. Where a select box may be 16 pixels tall in one browser, it could be 20 pixels tall in
another. Again, your design should accommodate these inconsistencies.
Web professional Roger Johansson created what may be the world's most authoritative source
on both the default styles of form elements and which CSS properties can and cannot be applied
to them in various browsers across multiple platforms. In a blog post titled “Styling even more
form controls,” (
www.456bereastreet.com/archive/200410/styling_even_more_form_controls/
),
Roger provides screen shots and comparisons of tests he ran across the board. It's an invalu-
able resource.
235
