Styling form controls

A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems.

The short answer is probably disappointing to many: you can’t. Some also argue that you shouldn’t, since doing so may reduce usability. 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.

There are a lot of controls that can be used in an HTML form. For this exercise, I applied styling to the submit button (<input type="submit" />), the menu, a.k.a. the select box (<select>), the single line text input (<input type="text" />), the checkbox (<input type="checkbox" />), the radio button (<input type="radio" />), and the file select control (<input type="file" />).

I created three five six simple documents, each containing twelve controls of the same kind. Then I created a different CSS rule for each element. Due to the various controls having different properties to style, I made two three slightly different sets of rules.

The following rules were applied to submit buttons, select boxes, single line text inputs, and file select controls:

  1. #el01 {color:#00f;}
  2. #el02 {background-color:#ddd;}
  3. #el03 {color:#fff; background-color:#33b;}
  4. #el04 {border-width:4px;}
  5. #el05 {border-color:#00f;}
  6. #el06 {border:0;}
  7. #el07 {font-family:"Courier New", Courier;}
  8. #el08 {font-size:150%;}
  9. #el09 {font-size:10%;}
  10. #el10 {font-weight:bold;}
  11. #el11 {padding:0;}
  12. #el12 {margin:0; text-align:right;}

For the select boxes and submit buttons I changed the last rule a bit to make sure any effect of text-align is visible:

  1. #el12 {margin:0; text-align:right; width:10em;}

Checkboxes and radio buttons were styled with these rules:

  1. #el01 {color:#00f;}
  2. #el02 {background-color:#ddd;}
  3. #el03 {color:#fff; background-color:#33b;}
  4. #el04 {color:#fff; background-color:#33b;}
  5. #el05 {border-width:4px;}
  6. #el06 {border-color:#00f;}
  7. #el07 {border:2px solid #999;}
  8. #el08 {width:40px; height:40px;}
  9. #el09 {font-size:150%;}
  10. #el10 {font-size:10%;}
  11. #el11 {padding:0;}
  12. #el12 {margin:0;}

I kept the styling very basic in order to clearly show the effect each rule has on styling in the various browsers. There are of course many more styles that could be added, like width, height, background images, and different border styles, but I had to draw the line somewhere. When the rules were set up, I loaded the documents in the following browsers:

  • Camino
  • Firefox 1.0 PR Mac
  • Firefox 1.0 PR Win
  • IE 5 Mac
  • IE 6 Win
  • Opera 7.53 Mac
  • Opera 7.53 Win
  • Safari

All Mac browsers were running on Mac OS X 10.3.5, and all Windows browsers were tested in Windows 2000 and Windows XP. By default, this is what the various controls look like in each of the tested browsers:

Submit buttons

Select boxes

Single line text inputs

Checkboxes

Radio buttons

File select controls

As you can tell, the default look of these form controls varies a lot between browsers and operating systems. And I haven’t even added any browsers running on Mac OS 9 or Linux to the mix.

The screenshots of the styled form controls are too large to include in this post, so they are available in separate documents:

The documents also contain the CSS and XHTML used, so you can check what styling the browser you are using applies to these controls.

As the screen shots show, very little styling is applied the same way in every browser. Safari won’t apply anything but font size, and only within a narrow span. An interesting thing is how Opera changes the button shape when a background colour is applied. This is especially noticeable in the Mac version.

In conclusion: trying to style form controls to look the same across platforms is often a waste of time. Leave them to the browser/operating system defaults, or do only very light styling. That way you will save yourself a lot of frustration, and avoid making your site’s visitors think about form controls.

Update: New form controls added: checkboxes and radio buttons.

Update: Added file select controls and Windows XP screenshots. Changed some CSS rules a little. A few Windows XP screen shots are missing. Coming soon.Windows XP screen shots now complete.

Phew. Hope I didn’t mix anything up.

Update: I’m working on an update to this article, in which the form controls that are missing from these examples will be included. Coming soon. Now available: Styling even more form controls.

Update: This article is more or less obsolete. Please refer to Styling form controls with CSS, revisited for a more up-to-date look at CSS applied to form controls.

Posted on September 27, 2004 in CSS

Comments

  1. One note about Opera (for Windows, I’m not sure about Mac) - all controls in an HTML forms are always styled with current skin, so it can look very different. Applying background-color to a button just turns off the skin of that control ;-)

    BTW - it would be even more interesting to see how css styling is applied to checkboxes and radiobuttons.

  2. September 27, 2004 by Roger Johansson (Author comment)

    Ah. That explains what happens when you apply a background colour :)

    Checkboxes and radio buttons are next. Not sure when I’ll get the time to add them though.

  3. Here’s an alternative method for styling checkboxes:

    Graphical Checkboxes with Javascript

  4. September 28, 2004 by Roger Johansson (Author comment)

    Richard: That looks nice.

    I can see some accessibility problems though. With images off, you get no checkboxes. You also need a mouse to be able to change the state of the boxes. Still, nice work :)

  5. Of course, you also have to remember things like windowsblinds, which can buttons and forms in another direction completely.

    Nice comparisons for a handly reference guide!

  6. Yup, accessability is an issue. Hot keys and tabbing doesn’t work either.

    I worked out a method for detecting if images are enabled: http://richardathome.no-ip.com/index.php?article_id=311

    Wouldn’t be too much work to plug the two together.

    (I’m working on the hotkeys issue too)

  7. Richard: It definately doen’t work in Opera (7,23 Win). All I got was four lines of text, that got a grey line above it when I hovered…

  8. Looks Ok to me :-) screenshot

    … apart from being unstyled.

  9. I’d certainly suggest including screen shots of Windows XP (with and without ClearType). Last time I looked at my log files that was (by far) the most used OS.

  10. September 29, 2004 by Roger Johansson (Author comment)

    Richard: Interesting. Knowing if images are on or not can be useful.

    Michel: Yep. XP screen shots are coming soon.

  11. Also note that setting a text color on a button is horribly rude because of this effect: you might get white-on-white, black-on-black, gray-on-gray, blue-on-blue or any other totally unusable combination. This is very common when people incorrectly styles text boxes of various types.

  12. It would be interesting to apply text-align: right to one of the textbox elements.

    This is often useful in forms dealing heavily in numbered inputs, and from my experience, anything using default Macintosh form element rendering (Safari, Mac IE, but not Mac Firefox) will not let you change text-align for a textbox.

  13. September 29, 2004 by Roger Johansson (Author comment)

    Ben: I knew there was something I hadn’t thought about. I’ll need to do a series of text-align tests too. Well, text-align:right would probably be enough to tell which browsers accept it.

  14. Basically, it looks like I’ve always said: Generally, its a bad idea to style form controls. Leave well alone :-)

  15. September 30, 2004 by Roger Johansson (Author comment)

    Olly: Absolutely. Just wait until I add the file upload controls, along with XP screen shots. :-p

  16. Great guide! Bookmarked this for future reference.

    Thx

  17. Thanks for those numerous screenshots, it is a good sample to show how perturbing or annoying it can be for the end-user. (and it showed me I still have a little bug in my own user stylesheet).

  18. Nice effort on this one, and good points for the most part. I think one of the general one’s about the consistency of form controls across UAs and OSs is a might absurd though. As in, it’s absurd to strive for much less even expect consistency with that regard.

    If OS manufacturers are going to insist on defaulting these things based on the OS, there’s nothing a lowly developer like us can do.

    Gecko-based UAs are wonderful because they seem to allow the most freedom with styling form controls. This is nice because, despite the beliefs of some psychotic purists, styling form controls can actually enhance usability by blending them with the design. You wouldn’t expect every CDROM to have similarly styled controls, not every elevator has the same buttons. It’s pointless and unecessary to expect such.

  19. Looks like we need some disabled form elements added to this as well.

  20. Very nice! For the select boxes the last two labels should be ‘FF/Moz XP’ and ‘Opera 7.53 XP’ instead of ‘win2k’.

  21. October 8, 2004 by Roger Johansson (Author comment)

    p8: Thanks. I knew I had to mix something up ;) Will fix asap.

  22. October 8, 2004 by Genau

    Thank you! I´ve been searching a good study about that to lon time. Very useful post!

  23. October 9, 2004 by Roger Johansson (Author comment)

    France: I’m working on an update, which includes disabled controls.

    Genau: Thanks :)

  24. A remark about Safari: Safari was built very close to the Mac interface. Looking at styled submit buttons, Safari displays button 9 okay while other browsers fail the test, apart from Opera.

  25. October 13, 2004 by Sarah

    Thanks for this reference… extremely helpful.

  26. Just what i was looking for a few weeks ago! Thanx!

  27. A very helpful guide. Thank you very much.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.