是否可以为选择框设置样式？ [英] Is it possible to style a select box?

问题描述

我有一个HTML选择框，我需要风格。我更喜欢使用CSS，但如果我必须使用jQuery来填补空白。

任何人都可以推荐一个好的教程或插件？ p>

我知道，Google，但我一直在寻找最近两个小时，我没有找到任何符合我需求的东西。

它需要：

• 兼容jQuery 1.3.2


• 可存取


• 不引人注目


• 可以根据选取方块的每个方面完全自订

$ b

解决方案

我见过一些jQuery插件，将< select> '转换为< ol> '和< option> 到< li> ，以便可以使用CSS样式。

以下是一个： https://gist.github.com/1139558 （用于这里，但看起来网站已关闭。）

使用它像这样： / p>

  $（'＃myselectbox'）。 
  

样式如下：

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

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

这篇关于是否可以为选择框设置样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！