如何删除 Mac 上 Safari 中选择元素的光泽？

在 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;
}

我的元素有我想要的背景颜色，但光泽仍然存在。有人知道怎么把它做成平的颜色吗？

171341 次浏览
小开
最佳答案

您可以使用这个 CSS 属性:

-webkit-appearance: none;

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

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

小开

如果你查看 Chome 的用户代理样式表，你会发现这个

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

简而言之，它的轮廓属性——使其为无

这样就不会发光了

小开

请查看-webkit 外观: 无及其衍生物

小开

使用 -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>

如果你想额外设置组件的背景颜色，那么在背景值的末尾添加一个逗号和颜色，例如 ... no-repeat 95% 50%, red;

小开

对不起，我又提到了一件旧物品。我在这里找到了我的问题的部分答案，但是我必须做一些工作，所以我想把我的结果分享给下一个人。

我最终使用了与其他贡献者相同的方法，但是做了一些调整来修复以下内容

  1. 长文本覆盖了其他解决方案中的箭头
  2. 正在使用的图像是一个有点老和丑陋的向上/向下组合箭头。

下面将给你一个解决上述问题的工作方案。注意: 我用了一个白色的箭头作为我的用例，你可能需要改变你的箭头的颜色。

这里有一个预告:

select with white arrow

select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
padding-right:20px;
}
小开

2019年版本

较短的内嵌图像 URL，只显示向下箭头，可定制箭头颜色..。

来自 https://codepen.io/jonmircha/pen/PEvqPa

作者可能是 乔纳森 · 米尔查

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 12px;
background-position: calc(100% - 20px) center;
background-repeat: no-repeat;
background-color: #efefef;
}
小开

正如这里多次提到的

-webkit-appearance:none;

还要移除箭头，这在大多数情况下不是您想要的。

我发现一个简单的变通方法是简单地使用 < strong > select2 而不是 select。您还可以重新设置 select2元素的样式，最重要的是，select2在 Windows、 Android、 iOS 和 Mac 上看起来一样。

小开

我已经用这个解决了我的

- webkit-外观: 无;

小开

2022年最新情况

这里有一个干净的解决方案，通过设置 appearance:none移除 Safari 的光泽样式，并保持下拉箭头，而不需要一个链接到外部背景图像。

将下拉列表包装在 div 中，并将其边框属性设置为三角形形状。注意，这在 div 的 after选择器上。

HTML:

<div class="select-dropdown">
<select>
<option value="Null">Favorite Fruit</option>"
<option value="Brooklyn">Apples</option>
<option value="Manhattan">Plums</option>
<option value="Queens">Oranges</option>
</select>
</div>

CSS:

  .select-dropdown:after {
content: " ";
position: absolute;
top: 50%;
margin-top: -2px;
right: 8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
}

感谢 Codepen 上的 Flash Buddy


提交答案