Colour My Forms

For easy copy & paste: Each example on a page of its own.

With the advent of halfways CSS-capable browsers, a whole new game is becoming increasingly popular: Colourful forms. While the new styling possibilities are great news for us control-hungry colour addicts, you should bear in mind that forms are basically information-gathering devices. You want your visitors to fill them out, not admire them. And you certainly don't want to confuse your visitors with fancy forms that are so colourful they don't look like forms any longer. And of course your forms shouldn't do strange things, like change their colours. So here are a few very colourful examples of what not to do.

This page here uses advanced selectors, and they work just fine in Netscape 6. An 'optimised' (dumbed down, actually) version for IEX5 is there.

Opera users will notice that most forms aren't styled at all. According to

Note that while it is possible to style form controls in Opera, you can't make them look like anything other than form controls, eg by setting background color. In this case Opera is in error to the CSS specification, even when that would be in breach with the operating system UI guidelines. We will fix this one day, but we are in no hurry.

It should also be noted that some of these stylesheets make the forms unusable in Netscape 4.x. Use the usual hacks to hide them.

1. Textarea with background

2. Input box with dotted border

IEX5 won't show the nice, dotted border here; it will show a solid border instead. At least it gets the salmon-coloured text right.

3. Submit button

This standard submit button has a colourful background-image and text. The background-image and the text colour of this button should change on :hover and :focus.

4. Radio buttons

It's hard to see, but the inside of the radio button should be orange, and change to green on :focus. This is done with the background-color. Of course you could also specify a colourful background-image, but it's kinda pointless to put Mona Lisa in such a tight space.


5. Checkboxes

More space to play with! Let's put a 16th century miniature in there! On second thought, a simple textured image will do. Changes on :focus.

Your favourite movie:
The colour purple
The color of money
Colour me stupid

Example 5a: Lisa in a box

Oh, so you absolutely do want to squeeze Mona Lisa inside a checkbox? Go right ahead:

If you use Internet Explorer, you will notice that poor Lisa has a white hole in her beautiful body.

6. Cat in the area

This cat is simply too cute to type all over it, don't you think? By the way, strange things happen if you set background-attachment in Netscape to prevent the image from scrolling, so I had to omit it here. But the default seems to be 'fixed', at least in my version of Netscape 6 the cat doesn't scroll away if you type more than 10 rows of text.

7. Sky form

This form is wrapped in a P element that has a background-image, and colour set to a dark blue. The background-image should also be visible in the select box content.

2000 Summer
2001 Winter
2002 Spring

Of course this is just a start. You could use more complex stylesheets, or use javascript to add a bit more interactivity than CSS has to offer.

© Matthias Gutfeldt, 2001

For example pages like this one, it makes sense to validate the code. And I even bothered to check the stylesheet. Valid XHTML 1.0! Valid CSS!