如何将下拉列表中的三角形图标更改为html中的自定义图标

Question

我正在尝试创建一些下拉列表，但我需要一个自定义图标，而不是复古的黑色三角形。我尝试了一些网络技巧，但不能满足我的建议。

我相信可以使用JavaScript或j查询，但我不知道。 怎么做??

Answer 1

你可以这样做，

检查此 demo jsFiddle

CSS

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background: url("YOUR IMAGE") no-repeat right center;
}

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

HTML

<div class="dropdown">
     <p>Show: </p>

     <select>
          <option> Balloon</option>
          <option> Mango</option>
          <option> Banana</option>
     </select>
</div> 

Answer 2

你可以试试这个。我已在Fiddler

为您制作了样品

<div class="dropdown">
      <p>Show: </p>
        <select>
         <option> Balloon</option>
         <option> Mango</option>
         <option> Banana</option>
       </select>
</div> 


.dropdown p {
    display: inline-block;
    font-weight: bold;
}

.dropdown select {

      border: 0 !important; 
      -webkit-appearance: none;
      -moz-appearance: none; 
      background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSePVWt6a83sB0JECOwilcf11eZsK_ciMNH-eUSpNpXJCKWLav7') no-repeat right; 
      background-position: 82px 7px;  
      width: 100px; 
      text-indent: 0.01px; 
      text-overflow: "";  
      color: #1455a2;
}

希望这会有所帮助

Answer 3

我已经接受了另一个答案，根据问题答案几乎到了这一点。但是我使用了答案，缺点就是你需要有适当的图像（我有哪些）放（我需要一个钻石形状，并在另一个三角形屏幕短附着）再次它不在IE中工作。所以，我究竟做了什么，我在画布中绘制整个事物（钻石和白色三角形）并定位它完美且使用pointer-events:none;允许画布将点击传递到实际的下拉列表。

这是完全需要的屏幕