HTML and CSS Reference
In-Depth Information
Figure 8-33
. A comparison of common form elements as rendered by two very different browsers: Safari on the left and
Internet Explorer on the right.
In the end, web designers must accept the inescapable fact that forms—like many other elements on a
web page—will never look the same in every browser. With that acceptance comes a Zen-like
relinquishing of control. In many cases, it's simply best to leave form controls alone and allow the browsers
to display them in whatever style they will. This isn't to say that form controls can never be styled, just that
perhaps sometimes they shouldn't be.
A person who regularly uses a particular browser on a particular operating system tends to grow
accustomed to a consistent presentation of form-related interface elements. They'll become trained to
recognize text fields, drop-down selections, and buttons in that familiar style because they see them every
day. Deviating too far from that norm—by making a submit button look like a text link, for example—may
breach your visitor's expectations and make the form more difficult to use (“I'm looking for the submit
button, but all I can find is a text link!”).
Despite these admonitions against overly styling form controls, and despite warnings that not all browsers
will equally honor CSS rules applied to those controls, it's still usually possible to affect their appearance.
Many browsers do, in fact, allow extensive alteration of a form control's rendering; its color, typography,
borders, and background can all be modified through CSS, and pretty consistently in the current
generation of browsers. Browsers that don't honor those style properties will simply display the control in
its default style. In keeping with the principles of progressive enhancement and graceful degradation,
browsers that support the CSS will display the control as designed, and those that don't support the
CSS…won't. The control will still function just as it should.
As a guiding principle, try not to overdesign your form controls, and those form controls should still look
like what they are. A text field should still look like a text field, and a button should look like a button.
Roger Johansson has explored the rendering of form elements in a wide range of
browsers on several operating systems, including tests of how those browsers honor or
disregard CSS rules applied to those elements. See his extensive collection of tests and
demonstrations at
456bereastreet.com/lab/styling-form-controls-revisited/
