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 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.
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.
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.
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, 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.
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.
