4

I want to style my drop down box so that instead of using the OS's default styles, I can replace both and with custom background images. Is there a solution that works in all major browsers (IE, Firefox, Chrome, Safari) and also for all OS's (Windows, OSX, Lunix). I'm aware that OSX has their own type of drop down boxes that are particularly hard to style with css.

Improve this question
1
  • No, not really. This is by design as operating systems have put a ton of work into usability studies. Any "solution" is going to involve hacky <div> elements with tons of styling bloat.
    – user1385191
    CommentedDec 23, 2011 at 17:24

1 Answer 1

Reset to default
2

As suggested here, I think jqtransform is what you're looking for.

Scroll down the page to see a demo. In addition to other elements, drop down boxes are there.

All the way at the bottom it says...

Just edit the css file to customize your form, that's it.

Improve this answer
5
  • Side note: I'm on FF8 on Win7 and whatever CSS is being used on the example page has pretty bad line-height or text alignment issues on the <input>s (text is riding the bottom edge). Figured I'd mention it since the question is about cross-browser/platform issues. Just make sure to test. The dropdowns look great in IE6 :)
    – No Results Found
    CommentedDec 23, 2011 at 16:52
  • Interesting. I'm on FF8, Linux. Do you have a screen-shot? It works fine on Chromium too for me. At the bottom of the page it says, "We did our best to make it work on ie 6+, safari 2+, firefox 2+".
    – Brigand
    CommentedDec 23, 2011 at 16:53
  • Here you go: i.sstatic.net/G8uQM.png The buttons look off as well (extra bottom padding) but I missed them in the screen shot.
    – No Results Found
    CommentedDec 23, 2011 at 16:55
  • There does appear to be a problem on .jqTransformInputInner div input. Removing the 8px padding fixes it for me. The reason for the large line heights on the form, is the large elements. The normal render about 17px high compared to 31px for the custom.
    – Brigand
    CommentedDec 23, 2011 at 17:01
  • About the buttons, there's a 4px padding on .rowElem, which wraps each visible row (label and field/button). If you remove it, everything is too condensed for my tastes. I think this is just the look recently. Twitter, YouTube, GMail, and so on, are all using large inputs like this.
    – Brigand
    CommentedDec 23, 2011 at 17:07