css - 如何在 Mac 上的 Safari 中删除选定元素的光泽？

Question

在 Mac 和 iOS 设备上，在 Safari 中，一个 <select>具有背景颜色的元素会在自身上产生光泽。这似乎不会发生在其他操作系统中。

例如，我有一个具有这些样式属性的选择元素:

select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}

我的元素有我想要的背景颜色，但光泽度仍然存在。有谁知道如何使它成为平面颜色？

Answer 1

您可以使用这个 CSS 属性:

-webkit-appearance: none;

请注意，这也会导致箭头图标消失。请参阅其他答案以了解将它们添加回来的方法。

参见 http://trentwalton.com/2010/07/14/css-webkit-appearance/