css - 在不丢失箭头的情况下样式化选择下拉菜单

Question

我有以下 html/CSS

这很好用，只是我在 chrome 中丢失了箭头。我尝试删除

-webkit-appearance: none;

从选择中我丢失了选项的格式(最初显示的除外)。

更新

我认为我上面的句子说明了这一点，但这是 Not Acceptable

Answer 1

您想要与 select 一起设置 option 的样式。不幸的是，几乎所有浏览器都严格限制 options 的样式以保持一致性。他们的疏忽很奇怪，但事实就是如此。以下是您拥有的一些选项(双关语意):

1:使用隐藏的 input 和 javascript 下拉菜单。可能使用 ul 和 li 来复制 select 和 option。

2:使用 jQuery 插件。有几个。

http://patrickkunka.github.io/easydropdown/

http://uniformjs.com/

http://jquery-plugins.net/tag/dropdown