Is it possible to style a select box?

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?

---

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

---

Update: As of 2013 the two I've seen that are worth checking are:

Chosen - loads of cool stuff, 7k+ watchers on github. (mentioned by 'a paid nerd' in the comments)

Select2 - inspired by Chosen, part of Angular-UI with a couple useful tweaks on Chosen.

Yeah!

---

As of 2012 one of the most lightweight, flexible solutions I've found is ddSlick. Relevant (edited) info from the site:

Adds images and text to select options

Can use JSON to populate options

Supports callback functions on selection

And here's a preview of the various modes:

---

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.

链接地址: http://www.djcxy.com/p/7158.html

上一篇: 可接受的CSS hacks / fixes

下一篇: 是否可以设计一个选择框？