使用 css 风格化 <select> [关闭]答案

【问题标题】：Stylize <select> with css [closed]使用 css 风格化 <select> [关闭]
【发布时间】：2011-10-06 16:03:33
【问题描述】：

如何实现如下图的样式？

【问题讨论】：

【解决方案1】：

使用 jQuery 插件。 for example, and more

【讨论】：

【解决方案2】：

你在使用 jQuery 吗？如果您是，请通过Filament Group 搜索像这样的自定义下拉框架

如果您好奇并想自己动手。继续阅读。

你不能真正为元素设置样式到那种程度，但诀窍是通过 JS 用触发器元素（通常是 <a>）和列表覆盖（通常是 <ul> 绝对定位并首先隐藏）替换该元素.然后，当触发元素被鼠标按下时，您可以显示/隐藏覆盖。

当然，您还需要处理单个列表项叠加层的点击事件。处理键盘交互和焦点/模糊状态也是一个好主意。

希望能指引你正确的方向。

【讨论】：