删除下拉图标问题

Question

我已经通过各种针对此问题似乎并没有为我工作不同的解决方案了。我敢肯定，这是因为我使用一个CSS框架，布尔玛，它倾向于接手事情有点为错误的方向。

我试图从下拉菜单中删除下拉图标，并用图像替换它。我有显示图像，但我似乎无法使默认的箭头隐藏/删除。

<div class="control">
 <div id="newAd-Preview" class="select">
  <select>
   <option >
    test
   </option>
   <option>Key</option>
   <option>Hello</option>
  </select>
 </div>
</div>

下面是一些解决方案，我发现，但似乎并没有工作的jsfiddle。它也已经有了布尔玛联系。 https://jsfiddle.net/uxgdp3b9/

Answer 1

加入这样的定义：

.select:not(.is-multiple):not(.is-loading)::after {
    background: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.8/collection/icon/svg/ios-arrow-dropdown.svg") no-repeat;
    transform: rotate(0);
    border: none;  
    width: 20px;  
    background-position: 50%;
    top: 0;
    bottom: 0;
    right: 5px;
    margin: 0;
    height: auto;
}

.select {
  display: inline-block;
  max-width: 150px;
  position: relative;
  vertical-align: top;

}

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

.select:not(.is-multiple) {
  height: 2.25em;
}

.select:not(.is-multiple):not(.is-loading)::after {
  background: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.8/collection/icon/svg/ios-arrow-dropdown.svg") no-repeat !important;
  transform: rotate(0) !important;
  border: none !important;  
  width: 20px !important;  
  background-position: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 5px !important;
  margin: 0 !important;
  height: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<div class="control">
  <div id="newAd-Preview" class="select">
    <select>
      <option >
        test
      </option>
      <option>Key</option>
      <option>Hello</option>
    </select>
  </div>
</div>

注：我需要添加!important标志，因为SO的片段不包括头中的CSS文件。如果您布尔玛CSS文件通过你的CSS文件重写，你不需要!important标志。