如何更改选择框箭头 [重复]答案

【问题标题】：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; 在父元素上，完成了...
为什么需要这样做？只是为了在所有浏览器中完美像素？？

标签： html css select

【解决方案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;
}

【讨论】：