Как изменить размер заполнителя Bootstrap-select

Question

Я хочу изменить цвет заполнитель/заголовок Bootstrap-select выпадающий список. Прямо сейчас, похоже, что это черное, я хочу, чтобы он был темно-серым.

Before

Я попробовал, добавив это мой CSS

span.filter-option.pull-left { 
    color: darkgrey; 
} 

After, который работает отлично. Но это также сделало варианты темно-серыми, а не черными. See here. Я хочу изменить цвет заполнитель до темно-серого не всех вариантов. Как мне лучше всего это сделать? Благодарю.

HTML:

<select name="box" class="selectpicker form-control"> 
    <option value="">Select</option> 
    <option value="option1"> Option 1 </option> 
</select> 

EDIT:

Чистый CSS стиль, кажется, не работает для меня по какой-то причине. Я пробовал использовать собственное свойство Bootstrap-select title, но оно не было выделено серым цветом, как показано в документах. Есть ли способ Javascript/JQuery для меня изменить цвет span.filter-option.pull-left в зависимости от того, является ли это «Выбрать» или «Вариант 1»?

PS. это то, что инструмент инспектора Chrome показывает мне для Select и для Option 1, нет другого варианта, кроме этих двух.

Answer 1

Основная проблема заключается в том, что плагин (bootstrap-select) на самом деле не имеет установленного способа сделать это. Если вы используете только один атрибут select (non multiple на select), вы можете положиться на класс bs-placeholder, который будет добавлен при выборе значения, которое (если вы используете LESS) использует переменную @input-color-placeholder для установки цвет:

.bootstrap-select { 
    ... 

    // The selectpicker button 
    > .dropdown-toggle { 
    ... 

    &.bs-placeholder, 
    &.bs-placeholder:hover, 
    &.bs-placeholder:focus, 
    &.bs-placeholder:active { color: @input-color-placeholder; } 
    } 
    ... 
} 

Единственная проблема состоит в том, что плагин не добавляет класса, если это множественный выбор, так что вы должны получить немного творческое, чтобы определить, если выбрано значение. К сожалению, единственная манипуляция с атрибутами DOM, которую я вижу по умолчанию, - это изменение названия .dropdown-toggle. Если вы не против жесткого кодирования первоначального title атрибута в CSS, вы можете добавить класс, который меняет цвет, если название определенное значения, например, так (https://jsfiddle.net/gxvqa5xa/):

.bootstrap-select > .dropdown-toggle[title=Select], 
.bootstrap-select > .dropdown-toggle[title=Select]:hover, 
.bootstrap-select > .dropdown-toggle[title=Select]:focus, 
.bootstrap-select > .dropdown-toggle[title=Select]:active { color: darkgrey; } 

Теперь, если это слишком грязный или ненадежен, плагин поддерживает слушатель событий, так что вы можете просто слушать изменения, проверьте, чтобы увидеть, если это пустое и добавить класс, если он (я предпочитаю этот метод):

$('.selectpicker').on('changed.bs.select', function (e) { 
 
\t $(this).prevAll('.dropdown-toggle').toggleClass('bs-placeholder', this.value === ''); 
 
}).trigger('changed.bs.select');

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css); 
 
@import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.css); 
 
*{outline:none !important;} 
 

 
.bootstrap-select > .dropdown-toggle.bs-placeholder, 
 
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover, 
 
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, 
 
.bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 

 
<select name="box1" class="selectpicker form-control" title="Select"> 
 
    <option value="option1"> Option 1 </option> 
 
    <option value="option2"> Option 2 </option> 
 
    <option value="option3"> Option 3 </option> 
 
</select> 
 
<select name="box2" multiple class="selectpicker form-control" title="Select"> 
 
    <option value="option1"> Option 1 </option> 
 
    <option value="option2"> Option 2 </option> 
 
    <option value="option3"> Option 3 </option> 
 
</select>

Answer 2

Dont know how bootstrap select work, но у нас есть селектор атрибутов в CSS, вы можете их использовать. Что-то вроде

elements[attribute] { 

} 

******* EDIT 1 ********

После копания в BS-выберите, я нашел что-то вроде этого

<select class="selectpicker" title="Choose one of the following..."> 
    <option>Mustard</option> 

    <option>Ketchup</option> 
    <option>Relish</option> 
</select> 

Который разместил бы коричневый цвет.

**** EDIT 2 * *****

Рабочий код

button.bs-placeholder[role='button']>span{ color:darkgrey; }

Answer 3

1. Набор разных цветов для всего выбора тега.
2. Установите нормальный цвет для всех непроверенных элементов.

select { color: red; } 
 
option:not(:checked) { color: black; } 
 
option:checked { color: black; }

<select name="box" class="selectpicker form-control colored-title"> 
 
<option value="" selected="selected">Select</option> 
 
<option value="option1"> Option 1 </option> 
 
</select>

https://jsfiddle.net/ojdoug22/

редактировать:

option:checked { color: black; } 

Просто добавьте эту строку в CSS.

Новый JSFiddle: https://jsfiddle.net/ojdoug22/1/

edit2: Добавлен скриншот. Я вижу красные опции «title», а все остальные черные. Если я выберу другой, то он изменится.