Why styling form controls with CSS is problematic
As someone who has spent lots of time taking screenshots of various CSS applied to form controls, I know that styling form controls consistently across browsers and operating systems is impossible. If you don’t know what I’m talking about, have a look at Styling form controls, Styling even more form controls, and Styling form controls with CSS, revisited.
In the discussions following those articles (and any article that discusses styling of form controls), there tends to be a bit of frustration expressed by designers who feel that being able to specify exactly how form controls appear in a graphical browser is necessary for their design to work well. I really cannot agree with that. In my opinion form controls should be left mostly alone (though some light styling may be acceptable) in order for the user to quickly recognise them for what they are.
Regardless of whether or not you agree with my opinion on this you will probably find Eric Meyer’s article Formal Weirdness a good read. In the article, Eric explains some of the technical reasons for form controls being so hard to style consistently across platforms with CSS. He also asks a lot of good questions related to how various CSS properties should affect form controls if browsers would let them.
Eric wrote the article as a follow-up to his series of articles about resetting the default CSS in browsers in order to get a consistent, cross-browser base stylesheet. His reset stylesheet evolved over several articles, and the final version is described in Reset Reloaded. Several people posted comments asking why Eric did not use a universal selector to set the margin and padding properties of all elements to zero. Eric’s response to that is that he avoided doing so because of the problems it causes for form controls.
After reading Formal Weirdness I think you will understand why.
- Previous post: Creating bulletproof graphic link buttons with CSS
- Next post: Reasons for code bloat