css - 更改插入符号图标

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

例如，您可以将其更改为绿色方 block :

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

演示 fiddle :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";
}

演示 fiddle :http://jsfiddle.net/pvT8Q/461/(我把定位留给你)