Is it possible to style a select box?

css, html-select, jquery

Solution

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: https://gist.github.com/1139558 (Used to he here, but it looks like the site is down.)

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;
}

Problem

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?

Original source