Change caret icon

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/ (я оставляю позиционирование до вас)