Is it possible to style a select box?

Question

I've got an HTML select box that I need to style. I'd prefer to use just CSS but if I have to I'll use jQuery to fill in the gaps.

Can anyone recommend a good tutorial or plugin?

I know, Google, but I've been searching for the last two hours and I'm not finding anything that meets my needs.

It needs to be:

• Compatible with jQuery 1.3.2
• Accessible
• Unobtrusive
• Completely customizable in terms of styling every aspect of a select box

Does anyone know anything that will meet my needs?

Answer 1

You can style to some degree with CSS by itself

select {
    background: red;
    border: 2px solid pink;
}

But this is entirely up to the browser. Some browsers are stubborn.

However, this will only get you so far, and it doesn't always look very good. For complete control, you'll need to replace a select via jQuery with a widget of your own that emulates the functionality of a select box. Ensure that when JS is disabled, a normal select box is in it's place. This allows more users to use your form, and it helps with accessibility.

Answer 2

I've seen some jQuery plugins out there that convert <select>'s to <ol>'s and <option>'s to <li>'s, so that you can style it with CSS. Couldn't be too hard to roll your own.

Here's one: http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/

Use it like this:

$('#myselectbox').selectbox();

Style it like this:

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

Answer 3

I found this: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

Using JqueryUI. Looks promising!

Answer 4

As for CSS, Mozilla seems to be the most friendly, especially from FF 3.5+. Webkit browsers mostly just do their own thing, and ignore any style. IE is very limited, though IE8 lets you at least style border color/width.

The following actually looks fairly nice in FF 3.5+ (picking your color preference, of course):

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

But when it comes to IE, you have to disable the background color on the option if you don't want it to display when the option menu isn't pulled down. And, as I said, webkit does its own thing.