删除下拉图标问题答案

【问题标题】：Remove drop down icon issues删除下拉图标问题
【发布时间】：2019-02-08 05:40:04
【问题描述】：

对于这个问题，我已经尝试了各种不同的解决方案，但这些解决方案似乎对我不起作用。我确定这是因为我使用了一个 CSS 框架 Bulma，它往往会在错误的方向上接管一些事情。

我正在尝试从下拉菜单中删除下拉图标并将其替换为图像。我已经显示了图像，但我似乎无法隐藏/删除默认箭头。

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

这是一个 jsfiddle，其中包含一些我发现但似乎不起作用的解决方案。它也已经与 bulma 相关联。 https://jsfiddle.net/uxgdp3b9/

【问题讨论】：

标签： css bulma

【解决方案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 的 sn-p 不包含标题中的 CSS 文件。如果您的 Bulma CSS 文件被您的 CSS 文件覆盖，则不需要 !important 标志。

【讨论】：