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

Question

我正在尝试创建一些下拉列表，但我需要一个自定义图标，而不是老式的黑色三 Angular 形。我尝试了一些来自网络的技巧，但不符合我的建议。

我相信可以使用 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>