HTML选择下拉箭头样式

如何使选择下拉箭头的样式如下图所示

<select>
    <option>Select Any</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

看这里

首先，需要删除“选择”下拉列表的默认样式。使用

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

对于IE使用：

select::-ms-expand { 
display: none;
}    

然后只需应用所需的样式，在本例中为背景图像

或者，您可以使用border创建一个三角形，并使用伪元素（如：before或：after）放置它

试试这个：

HTML:

---

这个怎么样。。。只需将该图像设置为选定的背景

.选择样式{ 宽度：268px； 线高：1； 边界：0； 溢出：隐藏； 高度：34px； 位置：相对位置； 背景：fff； } .选择样式>选择{ -webkit外观：无； 外观：无； -moz外观：无； 宽度：100%； 背景：无； 背景：透明； 边界：无； 大纲：无； 光标：指针； 填充：7px 10px； } .选择样式>跨度{ 位置：绝对位置； 底部：0； 右：0； 身高：0； 宽度：0； 光标：指针； 右边框：10px实心ff0099； 边框底部：10px实心ff0099； 左边框：10px实心透明； 边框顶部：10px实心透明； } 选择：：-ms展开{ 显示：无； } 选择任何 选择1 选择2

---

正如其他人提到的，您可以隐藏默认的“按外观选择箭头”属性并应用自己的样式

<> p>为了支持较低版本的IEI，考虑到9以下，因为外观属性即使使用MS前缀也不能工作，您可以使用下面的方法得到公共支持。

由css制作的箭头不是图像

$sel_val.changefunction{ var option=$this.find'option:selected'.val； $'sel_txt'.textoption； }; .wrapper{宽度：250px；边距：10px自动；} .sbx{ 保证金：0； 宽度：100%； 字体系列：arial； 位置：相对位置； 背景色：eee； } .cus_selt:在{内容：；宽度：0； 身高：0； 左边框：10px实心透明； 右边框：10px实心透明； 边框顶部：10px实心FD025F； 位置：绝对位置； 底部：-1px； z指数：2； 右图：-6px； 变换：旋转-45度； } .cus_selt{padding:20px；display:block；} .风格{ 浮动：左； 高度：56px； 利润率：-58px0； 不透明度：0； 宽度：100%； 过滤器：alphaopacity=0； } 选择一个值* 选择 选择1 选择2 选择3 选择4 选择5 选择6 选择7

---

你已经试过了吗？把图像作为背景图像应用到select上。css中有一个带边框的技巧。看看这个：谢谢你的回答，但是在IE中默认的箭头仍然是可见的，我很抱歉，我刚刚注意到你使用了整个图像作为背景，但是我想从纯cssThanks中得到这个效果。谢谢你的回答，但是在IE中默认的箭头仍然是可见的，IE使用`select:：-ms expand{display:none；}`请检查这个。。当我使用多个select标记时，它不起作用expected@user3932810您在脚本的两个下拉列表中使用了相同的类名，用唯一id更新了代码。通常不能使用类名，这样我就不必为多个标记编写不同的id了

select { 
    background:url("http://i.stack.imgur.com/8CVVr.png") no-repeat scroll right  bottom;
    background-size:contain;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding:5px 10px;
}

<div class="styled-select slate">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

div { margin: 20px; }

.styled-select {
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.styled-select.slate {
   background: url(http://i.stack.imgur.com/8CVVr.png) no-repeat right center;
   height: 34px;
   width: 240px;
}