自定义选择的插件按钮

Question

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

<div> <b> </ b> </ div>已包含它，但我不知道如何更改它，我想添加一个图标，并在该div中放置一个类。

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

但没有成功。

Answer 1

此箭头包含在背景精灵图像中。您可以使用浏览器的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>

Answer 2

这是您想要的按钮的css代码：

.down-icon {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.down-icon:before,
.down-icon:after {
   top: 30%;
   left: 25%;
   width: 50%;
   height: 15%;
   background: #dd4040;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.down-icon:after {
   top: 55%;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

Answer 3

根据@andreas https://stackoverflow.com/a/51615919/7840206的回答，我进行了一些修改并得到了想要的结果

.chosen-container-single .chosen-single div b {
    display: block;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    background: none;

}
.chosen-container-single .chosen-single div b:before,
.chosen-container-single .chosen-single div b:after {
  content: "";
  position: absolute;
}
.chosen-container-single .chosen-single div b:before,
.chosen-container-single .chosen-single div b:after {
   top: 30%;
  left: 25%;
  width: 50%;
  height: 15%;
  background: #dd4040;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.chosen-container-single .chosen-single div b:after{
  top: 55%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}