如何设置<select>元素的样式？

Question

如何彻底改变<select>元素的设计？例如,这就是我希望我的下拉列表看起来的样子:

Screeshot http://i56.tinypic.com/2n7h7uv.png

有没有办法用CSS做到这一点？如果没有,jQuery？

Answer 1

CSS只会在某些浏览器中提供帮助 - 例如,Internet Explorer将完全忽略它

但是,您仍然可以在页面上使用普通的select而不使用任何CSS,然后使用优雅降级的jQuery插件(因此当人们没有启用JS时,他们仍会看到原始选择框)

其中一个插件就是来自Filament Group的精彩jQuery UI选择菜单

然而,正如clonked在评论中指出的那样- 使用至少一些浏览器嗅探来检查人们是否没有从iPhone或类似设备访问该菜单,因为他们可能在访问JS选择框时遇到问题

如果你有任何机会在服务器端使用PHP,这里有一个很好的浏览器嗅探库:http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/