jquery - 自定义选择的插件按钮

Question

jquery 插件 https://harvesthq.github.io/chosen/有一个我无法访问的向下箭头按钮。

它包含在 <div> <b> </ b> </ div> 中但我不知道如何改变它，我想包含一个图标，在那个 div 中放一个类。

我想将此按钮修改为如下所示: Button Demo CSS

但没有成功。

Answer 1

此箭头包含在背景 Sprite 图像中。您可以使用浏览器的 Web 检查器查看相应的 CSS:

.chosen-container-single .chosen-single div b {
    display: block;
    width: 100%;
    height: 100%;
    background: url(chosen-sprite.png) no-repeat 0px 2px;
}

将 chosen-sprite.png 替换为您自己的图像以替换箭头。您还可以设置 background: none; 并使用伪元素 ::after 来创建自定义箭头。

这是一个使用伪元素方法的例子。当然，您必须根据需要调整样式:

$(document).ready(function() {
  $(".chosen").chosen();
});

.chosen+.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: none;
}

.chosen+.chosen-container-single .chosen-single div b {
  color: orange;
}
.chosen+.chosen-container-single .chosen-single div b::after {
  content: '∨';
}
.chosen+.chosen-container-single.chosen-with-drop .chosen-single div b::after {
  content: '∧';
}


/* the following styles are for demonstration purposes */
html,
body {
  background: black;
}
.chosen + .chosen-container-single .chosen-single {
    border: none;
    border-bottom: 3px solid orange;
    border-radius: 0;
    background-color: black;
    background: black;
    color: white;
    box-shadow: none;
}

<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />

<!-- single dropdown -->
<select class="chosen" style="width:200px;">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option>Dojo Toolkit</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>