It seems that there’s always some consternation in the web design community regarding the styling of form elements. Usability studies and user observation has taught them that they shouldn’t be applying styles to form controls; if you change the look of the control, it’s less recognizable for novice users who are used to the OS-default control elements. On the other hand, designers have CSS and Photoshop, and that ugly gray box is clashing with their meticulous page layouts and color schemes!
Most articles you read on styling form controls seem to say, “Go ahead and eat the cookie, but don’t spoil your dinner”. That is, you shouldn’t do it, but it’s “OK” to lightly style the controls, as long as they still look like controls.
Roger Johannson has a nice article that points out that all of this may be fairly pointless anyway, since it’s almost impossible to perform form styling that’s consistent across all browsers.
My opinion on that is that light, sensible styling of some form controls can be OK, as long as you don’t overdo it. But what if we don’t think about usability, and just want to see what actually can be styled? I’ve made a few examples that make up a longer answer to the question about styling form controls.
He lays out a nice series of screenshots that show the effect of different stylings on different browsers. As expected, Mozilla & FireFox bend over backwards to do as they’re told, whether it makes sense or not. Safari is on the other end of the spectrum, siding with usability and hardly obeying any style rules at all for form elements. Most designers like the Mac widgets anyway, so I’ve not heard a lot of griping about this.
It’s a good bookmark to keep handy for the next time you style a site. And, for you Mozilla, FireFox, and IE users, I bring you:
Big Giant Radio Buttons!