如何更改选择框箭头 [重复]
Posted
技术标签:
【中文标题】如何更改选择框箭头 [重复]【英文标题】：How do I change the select box arrow [duplicate] 【发布时间】：2014-04-04 20:58:36 【问题描述】：我需要你的帮助。
我似乎无法围绕这个问题解决这个问题。如何更改默认 Windows 7、IE 10 选择框中的默认箭头： 使其看起来像这样，使用下面的自定义箭头：。
这是我想要使用的箭头：
这是我的 html 标记：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
select font: normal 13px Arial; color: #000;
.container
border: 1px solid red;
position: relative; width: 124px; height: 18px; overflow: hidden;
.inpSelect
color: black; background: #ffa;
position: absolute; width: 128px; top: -2px; left: -2px;
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<select class="inpSelect" name="xxx">
<option value="0" selected="selected">actual browser</option>
<option value="1">IE</option>
<option value="2">Firefox</option>
<option value="3">Opera</option>
<option value="4">Safari</option>
</select>
</div>
</body>
</html>
【问题讨论】：
在fixed width 包装元素中修复了 width option 标签，在包装元素上使用 background-image，在 select 标签上使用 background-transparent，并且还使用overflow: hidden; 在父元素上，完成了...
为什么需要这样做？只是为了在所有浏览器中完美像素？？
【参考方案1】：
只使用一个选择器：
select
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
fiddler
【讨论】：
这似乎只适用于 Chrome。在 Firefox 中它根本不起作用，在 IE 中它给出的结果好坏参半。 你没有使用类 @Taylor 只需添加 select::-ms-expand display: none; 在 IE 中 泰勒你应该使用：-moz-appearance:none;为了在firefox下工作......实际上上面的解决方案远没有那么复杂并且更容易维护！ 对代码的一个小改进，将 `background-position-x: 244px;` 更改为 `background-position: right;` 以使其具有响应性【参考方案2】：可以用纯css箭头跳过容器或背景图片：
select
/* make arrow and background */
background:
linear-gradient(45deg, transparent 50%, blue 50%),
linear-gradient(135deg, blue 50%, transparent 50%),
linear-gradient(to right, skyblue, skyblue);
background-position:
calc(100% - 21px) calc(1em + 2px),
calc(100% - 16px) calc(1em + 2px),
100% 0;
background-size:
5px 5px,
5px 5px,
2.5em 2.5em;
background-repeat: no-repeat;
/* styling and reset */
border: thin solid blue;
font: 300 1em/100% "Helvetica Neue", Arial, sans-serif;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
/* reset */
border-radius: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance:none;
-moz-appearance:none;
示例here
【讨论】：
在 IE 中不起作用，因为它依赖于 -webkit-appearance 和 -mox-appearance。虽然听起来 Edge 确实支持它，但“Microsoft Edge 和 IE Mobile 支持带有 -webkit- 前缀的这个属性，而不是 -ms- 出于互操作的原因。” - caniuse.com 虽然这可以通过使用“select::-ms-expand display: none; ”来解决 太棒了！我还发现为选择框提供与 2.5em 背景大小相同的 padding-right 很有用；对于带有大量文本的小框或选项，文本将位于“按钮”的后面而不是在其顶部。 如何从箭头（在 mozilla 中）而不是整个箭头上移除白色背景 请注意，将外观设置为无也会让浏览器的错误消息在选择字段设置为必填时消失。【参考方案3】：CSS
select.inpSelect
//Remove original arrows
-webkit-appearance: none;
//Use png at assets/selectArrow.png for the arrow on the right
//Set the background color to a BadAss Green color
background: url(assets/selectArrow.png) no-repeat right #BADA55;
【讨论】：
以上是关于如何更改选择框箭头 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在python pandas数据框中选择和更改数据[重复]