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

Основная проблема заключается в том, что плагин (bootstrap-select) на самом деле не имеет установленного способа сделать это. Если вы просто используете одиночный выбор (атрибут не multiple в select), вы можете полагаться на класс bs-placeholder, который будет добавлен при выборе значения, который (если вы используете МЕНЬШЕ) использует переменную @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) {
	$(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>

Не знаю, как работает выбор начальной загрузки, но у нас есть селекторы атрибутов в CSS, вы можете их использовать. Что-то типа

elements[attribute] {

}

******* РЕДАКТИРОВАТЬ 1 *********

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

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

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

Что поместит заполнитель коричневого цвета.

**** ИЗМЕНИТЬ 2* *****

Рабочий код

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

1. Установите другой цвет для всего тега select.
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: Добавлен скриншот. Я вижу красные варианты выбора «заголовок», а все остальные черные. Если я выберу другой, он изменится.