Styling even more form controls
This is a follow-up to my previous post about Styling form controls. For some background info and comments, you may want to read that post. In short, this is a reference that shows how differently form controls are rendered by different web browsers and operating systems. It also shows that little can be done to make form controls appear the same across browsers and platforms.
I’ve taken screenshots of the form controls that were not included in the original post, as well as the disabled state of all controls. There is still more that could be added, since you could try styling form controls in many more ways than I have done here. The result would be the same, though: cross-platform styling is not possible with CSS. And that’s a good thing, in my opinion.
There are a lot of controls that can be used in an HTML form. For this exercise, I applied styling to the button (<button>), the submit button (<input type="submit" />), the menu, a.k.a. the select box (<select>) in single and multiple modes, the single line text input (<input type="text" />), the checkbox (<input type="checkbox" />), the radio button (<input type="radio" />), the multi-line text input (<textarea>), and the file select control (<input type="file" />).
I created a simple document for each control, containing twelve controls of the same kind, and one document with disabled versions of each control. Then I created a different CSS rule for each element. Due to the various controls having different properties to style, I made a few slightly different sets of rules.
The following rules were applied to buttons, submit buttons, select boxes, single line text inputs, multi-line text inputs, and file select controls:
#el01 {color:#00f;}#el02 {background-color:#ddd;}#el03 {color:#fff; background-color:#33b;}#el04 {border-width:4px;}#el05 {border-color:#00f;}#el06 {border:0;}#el07 {font-family:"Courier New", Courier;}#el08 {font-size:150%;}#el09 {font-size:10%;}#el10 {font-weight:bold;}#el11 {padding:0;}#el12 {margin:0; text-align:right;}
For the select boxes, buttons, and submit buttons I changed the last rule a bit to make sure any effect of text-align is visible:
#el12 {margin:0; text-align:right; width:10em;}
Checkboxes and radio buttons were styled with these rules:
#el01 {color:#00f;}#el02 {background-color:#ddd;}#el03 {color:#fff; background-color:#33b;}#el04 {color:#fff; background-color:#33b;}#el05 {border-width:4px;}#el06 {border-color:#00f;}#el07 {border:2px solid #999;}#el08 {width:40px; height:40px;}#el09 {font-size:150%;}#el10 {font-size:10%;}#el11 {padding:0;}#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. 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:
Buttons
Submit buttons
Select boxes, single
Select boxes, multiple
Single line text inputs
Multi-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:
- Styled buttons
- Styled submit buttons
- Styled select boxes (single)
- Styled select boxes (multiple)
- Styled single line text inputs
- Styled multi-line text inputs
- Styled checkboxes
- Styled radio buttons
- Styled file select controls
- Disabled controls (default styling)
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.
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 and your site’s visitors a lot of frustration.
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.
- Previous post: Light Weight Low Tech CSS Tabs
- Next post: Web Standards: A Business Perspective
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Nice collection, do you have alot of sparetime, hehe :) Well keep it up. Now we just need a contest of which one who looks the best.
Excellent! Very nicely done. I have never seen some of the browsers/os listed so this helps a lot! :)
Once again, you've done an awesome job in showing your readers the differences of the look 'n' feel of common GUI elements.
I think you've done great essential advocacy for standards-compliance web-design (once again).
Of course, I've often used CSS to style HTML GUI elements (to make them look good). But in the near past, I quitted that behaviour more and more often.
Thank you for your dilligence.
Jens: Hehe. I haven't had a lot of spare time while making all of these screenshots, that's for sure.
Thanks for the kind words. That's what makes hard work worthwhile.
Thanks much, Roger. I think this could help while developing, specially those big boxes are very strange to me. I would think that this is really an accessible option to make checkboxes etc. large, so anyone can click on them easily. Thus I am very dissapointed about Safari and other browsers that do not follow recommendations about accessiblity and leaving them very small.
Anyway, the best thing to do is to always leave forms completely unstyled as this is the best accessible and usable approach to make.
dusoft: As long as you make sure each control has an associated label, visitors can click the label as well, making it easier to hit.
Unfortunately clicking a label does not work in Safari. Hopefully it's coming in the next release. Anyone happen to know more about that?
Great and very useful reference collection for form controls appearance and style. Thanks a lot!
Roger: of course I know about the label thing, but still do users know? I doubt so.
Sure, not all users know about it, but I'd guess that many of those who benefit the most from labels being "clickable" know about that feature. That's just my personal guess. I have nothing more than gut feeling to back it up with ;)
A lot of people don't know about shortcut keys or right-clicking either. I doubt there is any single software related feature that all users know about.
Nice work. This'll be one to point clients to when they get too demanding about buttons etc...
It is my observation, that with IE/Moz/Firefox on WinXP, the styling of form elements differs with the windows theme. For a very simple test of this, look at your Disabled Form Elements page with the Windows XP and Windows Classic theme selected. You'll notice that it looks very different ;)
Great work Roger. You have truly shown that resistance is futile ;-)
In my opinion I think it´s a rather bad idea to style the form elements as users maybe confused but it would be nice if you could do it.
BTW, I came across the meta-element with attribute http-equiv set to "MsThemeCompatible" and content set to "no" (as shown below) a couple of months ago. Maybe something you would like to play around with.
<meta http-equiv="MsThemeCompatible" content="no" />
Nice resource, man! :thumbsup:
Awesome! Great work with the screenshots. I'm just curious as to why the disabled buttons in IE6 Win XP show "Bläddra" for the Browse button.
Chris: I somehow missed that. Looks like I grabbed that screenshot from a Swedish install of XP ;-)
I was looking if any browser suports border:0; property for select boxes (single) and found that Opera 8 Beta 2 (on win2k) suports it. I have not tested other properties or controls. If you will have spare time you could make some new screenshots of newer browsers. ;)
Can I change the font used in listboxs & buttons to a monospaced font?
I have a multi-column listbox where it is difficult to line up the output due to the proportional fonts used! Similiarly, a column of 11-character item codes displayed in buttons produce a multitude ot button sizes, again because of the proportional fonts displayed.
Can anything be done to produce a controlled output?
Vytenis: It's on my (long) list of things to do :-)
Wayne: Not really. Some browsers completely ignore font-family for form controls. You can try specifying a width though - most browsers will apply that.
Great work. I would really like to see some cross browser comparison like this on sizing a textarea..how to do 100% width ...I am searching now on the web and there is really little about it..
Roger Johansson said: A lot of people don't know about shortcut keys or right-clicking either. I doubt there is any single software related feature that all users know about.
Mac users CANT right click, you insensitive clod! :)
jack: Oh but we can, as long as we replace the piece of junk that Apple puts in the box ;-)
Very interesting post. The Mac always seemed to look at its best.
Very good work for who take care developing sites, it helps a lot. Very nice blog and excellent writing.
As far as appearance goes, Mac & Safari have IE & Moz beat.
I really do not like Mac (not having right click, and some other features), but its form controls do look better.
my two cents. take them if your need them.
Javier: Thanks :-)
Richard: The Mac OS has had right click support for years - all you need is to plug in a real mouse instead of the joke Apple puts in the box.
Mac users can control-click which is the same as right clicking, although not as intuitive – which is strange from a company that prides itself on ease of use!
Apparently using the whole mouse as a button is better ergonomically. I would have one hand free so that I can move my back to different positions and not get stiff!
Check the URL for Styled Checkboxes- I was inspired by these articles when I came looking for a way to make checkboxes look the way I want them. I eventually just did it myself.
These fall back to plain ol' checkboxes where Javascript is not available. However if you have a Javascript browser with no CSS there will be problems as I chose CSS-styled links to use as dummy checkboxes.
This problem can easily be rectified by using images nested inside links which would appear regardless of CSS availability.
Excuse the double post, but I have now refined styled Checkboxes AND Radio buttons into a highly accessible solution which falls back nicely to regular old form controls where there is no CSS and/or Javascript.
Unfortunately, it does not work in Internet Explorer, but DOES fall back to regular form controls and DOES NOT cause any adverse Javascript errors.
It works in recent versions of Firefox, Opera and Netscape and (in Firefox and Netscape at least) preserves form values through a page refresh.
http://dxdec.com/wod/formstyle/
Textarea, Height & Safari:
Safari requires a minimum height of 63 pixels to draw a functioning scrollbar. So if your code and the users settings produce a smaller box (e.g. rows=4 & default settings), no scrollbar will appear no matter how many lines the user enters. Frustrating to users. One way to avoid this is textarea {min-height: 63px} in the CSS.
Great article. A couple of minor things about buttons: I believe what you're calling a 'submit button' might be better described an 'input element button', because you can use in addition to . You can use buttons made with the element anywhere in a form, not just as a form submit button.
Incidentally, the 'submit' buttons generally look much more native to the platform than the element, but maybe the elements are more safely styleable. It'd be nice to see screenshots of the 'submit' ones added at some point also, for comparison. That's not a complaint :)
For those still stuck supporting NS4: NS4 does not support the button element (it just prints the button text and is unclickable).
Sorry--my entities got escaped rendering the post unreadable; I apologize for the repeat:)
Great article. A couple of minor things about buttons: I believe what you're calling a 'submit button' might be better described an 'input element button', because you can use <input type="button"> in addition to <input type="submit">. You can use buttons made with the element anywhere in a form, not just as a form submit button.
Incidentally, the 'submit' buttons generally look much more native to the platform than the button-element buttons, but maybe the button elements are more safely styleable. It'd be nice to see screenshots of the 'submit' buttons added at some point also, for comparison. That's not a complaint :)
For those still stuck supporting NS4: NS4 does not support the button element (it just prints the button text and is unclickable).
Great site/work, one question though... is there any way to have the height of the select box scale with the font?
thanks for the site...great info. Is there a way to define the style for disabled form elements in IE? I found this syntax works on mozilla:
input[disabled] { color:red }
border:0 solid; removes border on old Operas.
I thinking about it, you did it, Perfect !!!
Direct in my bookmarks.
My coworkers will be enjoy ;)
Is it possible to style the the radio/check button input so that it displays the text in hanging indent?
Thanks for sharing this tremendous work, Roger.
I feel really painfully sorry for bringing this up, but your file select should be adding a CSS rule width:200px, because with on file select is handled really weird in Firefox.
Hope you'll find the time to update the screenshots with an extra rule.
Seting the color of
won't work in IE6,(color of text is always #848284 or similar).
The benefits of FIELDSET and LABEL cannot be understated I believe, not only do they make labels for radio buttons and check boxes clickable, they group them too helping you bring structure to your form and keep relevant parts together. That makes for better semantic coding as well as better accessibility.
Is it possible to have scrollbar colors for the multiple select box?
Sorry, comments are closed for this post.