如何使用渐变来设置选择框的样式？

Question

我想用一些渐变来设置选择框的样式。 我的问题是，不知何故增加了阴影。 打开this fiddle，你会明白我的意思。 两个类的梯度是一样的...... 我不知道为什么在选择框中添加了阴影，我找不到解决方案。 你能救我吗？

谢谢。

Answer 1

select元素由底层平台/操作系统处理，而不是浏览器;因此，不可能对它们进行样式化（使用Chrome 8 / Win XP）。如果您认为需要使用样式化的select元素，则需要将常规html元素（例如ol或ul）与JavaScript结合使用。

我汇总了所涉及的想法for another question的演示，其中展示了如何实现这一目标：JS Fiddle demo。

我不确定'shadow'是什么意思，虽然通常使用input伪元素规则设置:focus个元素，以指示该元素具有焦点。这可以通过以下方式修改：

select:focus {
    outline: 0 none transparent; 
}

虽然这确实会降低使用键盘/非鼠标输入设备导航的表单的可访问性。理想情况下，最好定义一个适合您网站设计的outline。