更改插入符号图标

Question

我正在使用selectpicker插件,我正在尝试更改向下箭头图标.我尝试使用CSS但它没有用.我怎么能改变那个图标？

的jsfiddle

<select class="form-control selectpicker" data-hide-disabled="true" data-show-subtext="true" data-live-search="true">
    <option value="" disabled selected></option>
    <option value="update" data-subtext="old subtext">Update subtext</option>
    <option value="delete" data-subtext="more subtext">Delete subtext</option>
</select>

CSS

.bootstrap-select.btn-group .dropdown-toggle .caret {
    display: none;
}

Answer 1

这取决于你想要改变它的内容,但是目前插入来自这个CSS,它给它零大小但是应用边框来模仿向下箭头:

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

您可以将其更改为绿色方块,例如:

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  background-color: green;
}

示范小提琴:http://jsfiddle.net/pvT8Q/460/

或者您可以使用Bootstrap Glyphicons:

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  font-family: 'Glyphicons Halflings';
}

.bootstrap-select.btn-group .dropdown-toggle .caret:before {
  content: "\e003";
}

示范小提琴:http://jsfiddle.net/pvT8Q/461/ (我把定位留给你)