自定义选择的插件按钮

Question

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

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

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

但是没有成功。

Answer 1

此箭头包含在背景精灵图像中。可以使用浏览器的web inspector查看对应的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 的回答我做了一些修改并得到了我想要的结果

.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);
}

自定义选择的插件按钮

Customize Chosen plugin button

css

jquery

jquery-chosen