Styling Form Widgets

28 April 2004

14 comments

A Blue Perspective: Styling Form Widgets

"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!"

I'm not pointing fingers here, but even though forms aren't usually the best looking part of a Web site sometimes you've got to resist the urge to style them, for usability's sake.

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:

input.submit
{
border: 3px double #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
padding: 0.25em;
background-color: #FFFFFF;
background-image: url(http://www.macromedia.com/ ...
background-repeat: repeat-x;
color: #333333;
font-size: 75%;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, sans-serif;
}

Example:

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:

input.submit:active
{
border: 3px double #CCCCCC;
border-top-color: #999999;
border-left-color: #999999;
}

Example:

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.

Categories

, , ,

Comments

  1. 1/14

    Rahul Narain commented on 28 April 2004 @ 12:27

    Well, I'll admit the Outfront and InformIT results are hideous, but I've seen the Picment article before and while it's not the Holy Grail, I think they've done a pretty good job. The input fields look sunken in like the original widgets do, and the Submit button does have a raised appearance (though it needs to be less subtle). I don't really see a usability nightmare here, and the aesthetics are nice.

    By the way, I hope everybody knows that instead of using two different colors for beveled borders, you can simply set the base colour and let the browser do the dirty work by using the border-style keywords "inset" and "outset".

  2. 2/14

    The Man in Blue commented on 28 April 2004 @ 14:00

    Yeah, I suppose the Picment forms are a matter of taste.

    Personally, I don't like the drop shadows in combination with the soft grey edges, makes it looked very washed out, but again ... a style thing.

    One problem is the submit button -- looks like one of the text fields, not a button.

  3. 3/14

    Joe Grossberg commented on 29 April 2004 @ 02:48

    Very good. One thing I don't like, though, is that the button no longer has the visual effect of being pressed when the user clicks on it. Any (simple) way around this?

  4. 4/14

    Joe Grossberg commented on 29 April 2004 @ 02:50

    ... however, the one below this form ("Comment!") does have that behavior.

    (I'm using Firebird 0.7.)

  5. 5/14

    The Man in Blue commented on 29 April 2004 @ 22:22

    Joe, there is indeed a fairly simple way of adding the click feedback, I've updated the entry with it.

  6. 6/14

    Brian Andersen commented on 3 May 2004 @ 06:59

    Hmmmm.

    I love how safari absolutely overrides almost all form styling. It's the same, good looking aqua button, only with slightly differently sized text.

    Go apple -.-

  7. 7/14

    Michael Koukoullis commented on 4 May 2004 @ 09:45

    I agree with the ManInBlue
    , nicely stated! Sometimes one must remember that just because you can do something doesn't necessarily mean you should :)

    Even ugly native wigets if used widely enough will eventually engrain themsleves in users psychlogy and behaivour.

    Irresponsible deviation from the styling of common widgets can be catastrophic for usability.

    Cheers

    Michael K

  8. 8/14

    James commented on 7 May 2004 @ 04:17

    >>I'm not pointing fingers here, but even though forms aren't usually the best looking part of a Web site sometimes you've got to resist the urge to style them, for usability's sake.<<

    Isn't this basically the same argument that was once used for why all hyperlinks should be blue/red/purple and underlined?

  9. 9/14

    Joe Grossberg commented on 7 May 2004 @ 04:26

    I agree with James (8) ... it's about a balance of goals (usability, style).

    If the user can't recognize it as a form element, it's too stylized. Otherwise, I don't think you should be wedded to the system's native widgets any more than you should be obligated to use the default font faces and colors.

  10. 10/14

    Aleksandar commented on 8 May 2004 @ 22:13

    Never change the overal look and feel of user's form elements. I <a href"http://www.aplus.co.yu/Dots/109/">wrote that</a> a while ago while searching for a ways to style forms.

    It shows as good practice, over and over again.

  11. 11/14

    Peter Bengtsson commented on 9 May 2004 @ 06:53

    On my personal homepage the comment form on the blogs have a javascript effect that I'm proud of. When you start writing in the textarea box, the "Preview first" button changes to bold type. When you are previewing comment you're about to submit the "Add Comment" button changes to bold.
    I think it makes a lot of sense even though it's a bit naughty. What do you think?

    See http://www.peterbe.com/XHTML,HTML,CSS-compressor
    for an example

  12. 12/14

    The Man in Blue commented on 10 May 2004 @ 00:11

    Peter: that sounds like a good idea, except on the link you sent me it doesn't appear to work (IE 6).

  13. 13/14

    matt commented on 26 November 2004 @ 01:33

    its not good to tell people they can't style something just because they feel usability might be an issue. It is patronising and, in the case of Safari a pain.

    i need a DELETE record button to stand out. Aesthetics here are not an issue and I want it RED godammit!

    B*stds wont let me. Well, THANKS auntie, I will wear sensible shoes.... :-)

  14. 14/14

    David Bootle commented on 1 February 2005 @ 07:50

    I can see why Safari would make form buttons unstylable - aqua buttons look great. But why extend that thinking to text input fields? I've noticed that if I apply a style to these elements that looks good in say Firefox, Safari does nothing except place about 5px padding-top which just looks terrible. That's throwing the baby out with the bath water.

    david@bootle.biz

  15. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed