Page style:

A Blue Perspective: Styling Form Widgets

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

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!

Comments

1/14. 28 April 2004 @ 12:27, Rahul Narain wrote:

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/14. 28 April 2004 @ 14:00, The Man in Blue wrote:

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/14. 29 April 2004 @ 02:48, Joe Grossberg wrote:

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/14. 29 April 2004 @ 02:50, Joe Grossberg wrote:

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

(I'm using Firebird 0.7.)

5/14. 29 April 2004 @ 22:22, The Man in Blue wrote:

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

6/14. 3 May 2004 @ 06:59, Brian Andersen wrote:

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/14. 4 May 2004 @ 09:45, Michael Koukoullis wrote:

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/14. 7 May 2004 @ 04:17, James wrote:

>>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/14. 7 May 2004 @ 04:26, Joe Grossberg wrote:

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/14. 8 May 2004 @ 22:13, Aleksandar wrote:

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/14. 9 May 2004 @ 06:53, Peter Bengtsson wrote:

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/14. 10 May 2004 @ 00:11, The Man in Blue wrote:

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

13/14. 26 November 2004 @ 01:33, matt wrote:

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. 1 February 2005 @ 07:50, David Bootle wrote:

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

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.




Archives