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 has been 'optimised' (dumbed down, actually) for IEX5 (and also Opera 5). Meaning that it doesn't use advanced selectors. Even then, some effects won't show up in IEX5. The original page for Netscape 6 does use advanced selectors.
Opera users will notice that most forms aren't styled at all. According to http://www.opera.com/opera5/specs.html#css:
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.
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.
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, in theory. And IEX5 puts the image around the checkbox instead of inside it, like Netscape 6 does. I wonder which rendering is correct.
Oh, so you absolutely do want to squeeze Mona Lisa inside a checkbox? Go right ahead:
This cat is simply too cute to type all over it, don't you think? By the way, the background-attachment is set to 'fixed'. This means the background should not scroll when you type in more than 10 rows of text. One of the few things that IEX5 gets right, while my version of Netscape 6 doesn't.
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, 2001For example pages like this one, it makes sense to validate the code. And I even bothered to check the stylesheet.