在 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;
}
我的元素有我想要的背景颜色,但光泽度仍然存在。有谁知道如何使它成为一个平面颜色?
@豆兰;你必须写
-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 外观:无; -webkit 外观:无;外观:无; /* 然后是你想要的任何样式*/ height: 30px;宽度:100px;填充:5px; }
no-repeat 95% 50%
替换为 no-repeat right 2px center
2019版
更短的内嵌图片 URL,仅显示向下箭头,可自定义的箭头颜色...
来自https://codepen.io/jonmircha/pen/PEvqPa
作者可能是Jonathan MirCha
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;
}
background-color
属性适用于选择元素的背景。要更改向下箭头的颜色,您需要更改 URL 中的 SVG 填充属性,例如 fill='%23fc0000'
抱歉堆积在旧物品上。我在这里找到了我的问题的部分答案,但必须做一些工作,所以我想为下一个人分享我的结果。
我最终使用了与其他贡献者相同的方法,但进行了一些调整以解决以下问题
长文本覆盖了其他解决方案中的箭头 正在使用的图像是一个有点陈旧且丑陋的上/下组合箭头。
下面将为您提供解决上述问题的有效解决方案。注意:我的用例中使用了白色箭头,您可能需要更改箭头的颜色。
这是一个预览:
https://i.stack.imgur.com/rUJgz.png
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;
}
查看 -webkit-appearance: none 及其派生词。最初由 Chris Coyer 在这里描述:https://css-tricks.com/almanac/properties/a/appearance/
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;
}
Credit to Flash Buddy on Codepen
正如这里多次提到的
-webkit-appearance:none;
还会删除箭头,这在大多数情况下不是您想要的。
我发现一个简单的解决方法是简单地使用 select2 而不是 select。你也可以重新设置 select2 元素的样式,最重要的是,select2 在 Windows、Android、iOS 和 Mac 上看起来是一样的。
我用过这个并解决了我的
-webkit-外观:无;
如果你检查 Chome 的用户代理样式表,你会发现这个
outline: -webkit-focus-ring-color auto 5px;
简而言之,它的大纲属性 - 使其无
那应该消除辉光
不定期副业成功案例分享
-moz-appearance: none; -webkit-appearance: none; appearance: none;