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

112

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

我的元素具有所需的背景色，但光泽仍然存在。有谁知道如何使其成为纯色？

— 伊恩·亨特
source

194

@beanland; 你必须写

-webkit-appearance:none;

在你的CSS。

阅读此http://trentwalton.com/2010/07/14/css-webkit-appearance/

— Sandeep
source

4

无需感谢，因为有很多我不知道的事情:)

— sandeep

123

有没有办法让箭头保持在右侧？我只想覆盖颜色。谢谢

— Marc

19

@sandeep：并使其成为跨浏览器：-moz-appearance: none; -webkit-appearance: none; appearance: none;

— Dorian

6

@Marc如果3年后您仍然有兴趣。.我添加了一个解决方案，使箭头显示出来。

— alicjasalamon

2

IE的解决方案是使用select ::-ms-expand {display：none; }来隐藏本机IE选择框下拉图标，然后使用实际的png图像作为新图标的背景。发生问题是因为SVG图像并不总是通过IE中的CSS正确定位。

— 菲利斯·萨瑟兰

106

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

展开摘要

— 阿利贾萨拉蒙
source

16

甜蜜的，欣赏箭头修复！这里的具有透明背景上的版本：选择{背景：URL（数据：图像/ SVG + xml的; BASE64，PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =）不重复95％50％; }

— Ingo Renner

1

制作了一个透明箭头（由于长度原因，无法在此处粘贴）：pastebin.com/HQ0x4Rka

— mga

5

如果您有广泛的选择元素，这将看起来有点。要解决此问题，可以使用CSS3的背景位置边缘偏移来更好地对齐背景。因此，请替换no-repeat 95% 50%为no-repeat right 2px center

— iSWORD

3

相同的箭头，但使用白色透明的pastebin.com/07iS41b5

— Andreas Gassmann

2

我注意到添加的箭头同时包含向上/向下箭头-只是为了显示通常的向下箭头吗？

— Brett

14

2019版本

内嵌图片网址较短，仅显示向下箭头，可自定义箭头颜色...

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

— 诺埃尔·亚伯拉罕
source

1

该background-color属性适用于select元素的背景。要更改向下箭头的颜色，您需要更改URL中的SVG填充属性，例如fill='%23fc0000'

— Noel Abrahams

最好使用不带calc的背景位置：background-position：right .8em top 60％; 和一些游标：是必需的

— Iggy

有人可以演示这个的双箭头版本吗？

— evolross

3

很抱歉堆积到一个旧项目。我在这里找到了部分问题的答案，但不得不做一些工作，所以我想与下一个人分享我的结果。

我最终使用了与其他贡献者相同的方法，但是做了一些调整来解决以下问题

长文本覆盖了其他解决方案中的箭头
所使用的图像是一个有点旧而且向上/向下的组合箭头。

以下将为您解决上述问题提供可行的解决方案。注意：我在用例中使用了白色箭头，您可能需要更改箭头的颜色。

这里是预览：

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

— 贾斯汀·爱德华兹
source

//，您介意解释如何以及为何去除光泽吗？

— 弥敦道（Nathan Basanese）

1

该解决方案主要包括两个部分：1.请求浏览器不对元素进行任何样式/显示。2.提供合理的样式。在不可怕的浏览器（阅读，而不是野生动物园）中，浏览器提供的元素样式很好。但是在野生动物园中，浏览器提供的样式令人作呕且糟糕。因此，我们必须覆盖每个浏览器中提供的浏览器显示。出现在结尾的线：无从上方开始的第1部分。其他内容涉及第2部分。这有帮助吗？

— 贾斯汀·爱德华兹

2

查看-webkit-appearance：none及其派生类。最初由Chris Coyer在这里描述：https：//css-tricks.com/almanac/properties/a/appearance/

— 琼西
source

0

正如这里多次提到的

-webkit-appearance:none;

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

我发现一个简单的解决方法是仅使用select2而不是select。您也可以重新设置select2元素的样式，最重要的是，select2在Windows，Android，iOS和Mac上看起来相同。

— 查尔斯
source

-8

如果检查Chome的User Agent StyleSheet，则会发现此内容

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

简而言之，它的outline属性-将其设为None

那应该消除光芒

— 苏拉奈金
source

8

他不是在问轮廓，而是要问光滑的背景。

— 阿波罗