Apple Doesn’t Care About Your Giant Checkbox

By on September 29, 2004

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!


Gadgetopia

Comments

  1. Usability in Safari is still a work in progress. More than anything else about the browser, forms are the most frustrating. Tabbing to checkboxes, radio buttons and select boxes just flat out doesn’t work properly. With respect to style Safari is pretty tightly tied to OS X. I do agree that the aqua appearance of form elements tends to look much better than any attempt by the designer to style them.

  2. strangely, your giant radio buttons “for mozilla, firefox, and ie users” display only as normal radio buttons in firefox.

    but they do work in ie

Comments are closed. If you have something you really want to say, email editors@gadgetopia.com and we‘ll get it added for you.