Styling Forms

2nd December 2003 · Last updated: 5th October 2016


Links menu screenshotI just realised you can add background images to drop-down menus! It only works in Mozilla though. IE6 shows any background colour applied, while Opera 7 does nothing.

This opens up a world of possibilities. You could add a different graphic for each menu option, put in a thin line to separate sections, or just add a nice background image or pattern. Or how about images like headers replacing the text for each item?

I wonder if other form elements can be styled this way?

Here's the code I'm using:

.formgap {background:#ffefd5 url(../images/bg4.gif) top left repeat;}

Update: Take a look at a test demo I made, to see what can be achieved. Amazing!

Comments (5)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Dysfunksional.Monkey:
    Not too good for usability though. If a screen-reader or in-compatible browser came to a select box which used text-background-images under spaces rather than actual text the user won't see the option. Pointless, really.

    Its probably best to keep this usage to a minimum - maybe to add a *little* styling to your select box for moz/ie, rather than letting it take over.

    Posted on 3rd December 2003 at 11:10 am
  2. ARJ:
    The other not-so-keen thing is that (at least for Firebird 0.7 in Win) the highlighting gets stuffed up for non-text options in the select box. Which could be theoretically solved with a hover state, I suppose. But it's no good not knowing exactly what item your mouse is hovering on.

    Posted on 4th December 2003 at 7:04 am
  3. Moose:

    You have just fertilized my evil imagination. Not that I will be using background images, but I have an idea... an idea to be filed under you know which category :)

    Ivan Moosevich Karamazov

    Posted on 5th December 2003 at 1:14 pm
  4. Michael Heraghty:
    DM is right -- there are usability issues, not to mention the browser-compatibility ones.

    But if you just want to "play" with IE, or you know for sure that your visitors will be IE users (if you're designing for an intranet, say), then, yeah, there are a lot of IE-specific features like this (including gimmicky ones like screen wipes and fades; filters like dropshadow etc. for text and images; and so on).

    There are also other form features that you can change, such as the style and colour of submit buttons...

    Posted on 15th December 2003 at 2:57 pm
  5. TS:
    <input> and <textarea> can be styled with background images as well. Even better, using a Gecko based browser you can combine it with :focus
    Radio buttons are a bit messy, though...

    Posted on 14th July 2004 at 7:40 pm