Styling Form Widgets
28 April 2004
"With great power comes great responsibility." So said the Gods of the W3C when they handed man the gift of CSS 1. Much good was done with this boon from the heavens. Content and style – once entangled like the roots of a mangrove – were cloven in twain. Code was lightened, CSS files were cached and a peace descended over the land. But some, a foolish few, scoffed and laid a curse over their web pages, crying out: "let our forms be blighted and hideous!"
Form elements come from deep within your Operating System, they're the primordial substance of Web pages, and there's a reason why they look like they do. Buttons and text fields classically look 3D because they are meant to be interacted with. The tactile feel that a bevel adds to an element gives the user hints as to their functionality. If a form button looks like it can be pressed, then it should be pressed. This is what Donald Norman would call a "perceived affordance". When you take that affordance away, users will not recognise how they interact with an element, or take longer to do so.
So, why give a form element a uniform one pixel border and make it just look like a box with a word in it? I don't think that the minimal aesthetic improvements made by styling form elements in this manner outweighs the fact that such changes detract from the usability of a form – making users unfamiliar with what to do and how to interact with the Web page. Even though it removes some amount of choice from the designer, I think the decision by the OSX/Safari designers to ignore pretty much all CSS styling of form buttons was a sound one. The user ends up with a consistent, good looking interface – and who's going to make the Aqua buttons look better anyway?
I have only seen one instance of styling form elements where I have thought "yes, that really is an improvement over the default appearance." The Macromedia site features forms with nice styled buttons [screenshot], although I'm not too sure about their skimpy text fields. The buttons maintain their "clickability" with a 3D feel that utilises a different CSS border-type and a simple gradient GIF. No crazy colouring, just subtle cues as to its affordance. The styles go like this:
border: 3px double #999999;
background-image: url(http://www.macromedia.com/ ...
font-family: Verdana, Helvetica, Arial, sans-serif;
It even looks OK if you don't want to use an image:
... or if you want to colour it:
Tested in Win 98: IE 6, Firefox 0.8, Opera 7.23.
Colouring works best if you use a light base colour, because there's no way to get rid of the white space inbetween the outer and inner lines of the double border (in IE & Opera). The top and left borders should also be a lighter shade than the bottom and right borders in order to create a tactile, 3D effect.
By specifying a style for the button element, you may remove default click feedback in some browsers (notably Firefox, not IE). To restore the appearance of clicking the button, specify styles using the CSS pseudo class :active. This can best be done by just reversing the border colours, although you could do any other CSS effect that you wanted:
border: 3px double #CCCCCC;
Whether you use the Macromedia styles or not, make it easy for your user to decide what they can click on, and for God's sakes, don't use red text fields!
Update (2010-09-20): This article has been translated into Belorussian by Patricia Clausnitzer.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout