删除下拉图标问题

Question

对于这个问题，我已经尝试过各种不同的解决方案，但这些解决方案似乎都不适合我。我敢肯定这是因为我使用的是 CSS 框架 Bulma，它倾向于在错误的方向上接管一些事情。

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

<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/

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 的代码片段不包含 header 中的 CSS 文件。如果你的 Bulma CSS 文件被你的 CSS 文件覆盖，你不需要 !important 标志。

删除下拉图标问题

Remove drop down icon issues

css

bulma