如何样式选择下拉？答案

【问题标题】：How to style select drop down?如何样式选择下拉？
【发布时间】：2011-01-03 19:40:42
【问题描述】：

我在运行 Firefox 的 mac 上。我有一个网站，选择下拉框的风格很有趣：

当我在同一个浏览器中查看其他网站时，它们看起来不同：

甚至在我的代码中：jsFiddle

什么可能导致我的网站显示它的状态，因为据我了解，您几乎无法控制选择框的显示方式？

谢谢

【问题讨论】：

【解决方案1】：

您是否使用 CSS 来格式化 <select>？还是 CSS 重置？如果您使用border 或background 之类的规则，默认样式会消失，您会看到这个灰色框。您应该删除这些 CSS 设置。

【讨论】：

【解决方案2】：

默认下拉菜单样式因浏览器而异。不幸的是，没有真正的 CSS 方法来重新设置它们的样式。

也就是说，您可以使用像这样的 jQuery 插件：Custom Select Box，我过去使用它效果很好。

【讨论】：

【解决方案3】：

第二个例子是使用select的系统表示来显示的。第一个看起来不像系统选择，因为可能应用了一些自定义样式，而不仅仅是重置系统演示。

通常不可能有效地设置文本字段以外的 HTML 输入字段的样式。为此，开发人员通常使用复杂的 HTML 重新实现输入控件，这是 Ian Devlin 建议的。

【讨论】：