我怎样才能删除在Mac上的Safariselect元素的光泽?

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

例如,我有一个具有这些样式属性的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; } 

而我的元素有我想要的背景颜色,但光泽依然存在。 有谁知道如何使它成为一个平坦的颜色?

@beanland; 你必须写

 -webkit-appearance:none; 

在你的CSS。

读这个http://trentwalton.com/2010/07/14/css-webkit-appearance/

使用-webkit-appearance:none; 将删除箭头,指示这是一个下拉菜单。

看到这个代码片段,它可以在不同的浏览器上工作,添加自定义箭头而不包含任何图像文件:

 select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%; -moz-appearance: none; -webkit-appearance: none; appearance: none; /* and then whatever styles you want*/ height: 30px; width: 100px; padding: 5px; } 
 <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

看看-webkit-appearance:none和它的衍生物。 最初由Chris Coyer在这里描述: https ://css-tricks.com/almanac/properties/a/appearance/

如果你检查Chome的用户代理样式表,你会发现这一点

 outline: -webkit-focus-ring-color auto 5px; 

简而言之它的大纲财产 – 做它无

应该消除辉光