Question

对于这个问题，我已经经历了各种不同的解决方案，这些解决方案似乎对我不起作用。我敢肯定这是因为我使用的是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/

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文件。如果您的Bulma CSS文件被CSS文件覆盖，则不需要!important标志。

删除下拉图标问题

1 个答案: