Forms and User Interface Elements - The CSS - page 192

Fake It Until Browsers Make It
Clever developers have come up with a whole slew of tricks to get
around the lack of styling flexibility with forms in browsers. They
get around some of the cross-platform styling quirks inherent in
form fields by disabling borders and using fancy background images
or using visibility and z-index tricks, and they get around form
styling limitations in browsers by creating complex JavaScript-based
interactions. Some methods leave the original input fields intact, but
others use JavaScript to replace the standard form input controls and
instead use a series of click or other events to control the appearance
of nonform fields, storing the resulting values in hidden fields.
Here are a few examples of using CSS and JavaScript to work around
form styling limitations:
■ Replacing the varied looks of file inputs (see the example at
http://www.quirksmode.org/dom/inputfile.html ).
■ Using backgrounds for highly styled radio buttons and check
boxes (see the example at http://www.thecssninja.com/css/
custom-inputs-using-css ).
■ Implementing new HTML5 input types using custom JavaScript-
based widgets such as sliders, date pickers, color pickers, and other
types that are part of HTML5 if the visitor's browser doesn't sup-
port them (discussed at http://diveintohtml5.org/forms.html ).
Text and Form Element Inheritance
Stemming from the desire to present native and consistent controls to
users, CSS properties that are normally inherited from parent elements
to child elements such as font settings and color are not inherited by
form elements. Therefore, styling for form elements has to be done by