Как вписать название в Bootstrap select

Я использую Bootstrap select (https://silviomoreto.github.io/bootstrap-select/) для моих выпадающих списков.Как вписать название в Bootstrap select

<select id="dataBox" name="dataBox" title="Select data" class="selectpicker form-control"></select>

Однако вопрос здесь название выглядит несколько иной (шрифт и цвет) из заполнителей в полях ввода в окрестностях. Как показано ниже. Нужно ли форматировать заголовок вместо заполнителя?

Это титульный

Это заполнитель

источник

2017-01-27 kevin_b

Вы можете поделиться живым примером? Было бы полезно увидеть эти элементы в контексте и посмотреть, что вызывает тонкие различия. –

Это отличный вопрос! +1 Это большая проблема, потому что Bootstrap Select не имеет явного класса, когда заголовок отображается на кнопке. (Который, я думаю, был бы приятной особенностью) – EoghanTadhg

Согласно the docs, вы смотрите на этот селектор:

.bootstrap-select.btn-group .dropdown-toggle .filter-option { 
    /* your custom stuff */ 
}

Название в дань помещается в этот элемент и действует как заполнитель:

<span class="filter-option pull-left">Select data</span>

источник

2017-01-27 16:46:17

Стоит отметить: это стилирует видимый атрибут заголовка на кнопке. Тем не менее, это будет стиль любого появляющегося выбора на кнопке. Не поможет, если вы хотите, чтобы название отображалось не так, как обычные выборы. – EoghanTadhg

Bootstrap-select сложный. Ответ должен здесь:

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

источник

2017-01-27 18:14:34 OneMoreQuestion

+1 Насколько я могу судить, это лучший подход и среди очень немногих вариантов без введения Javascript. – EoghanTadhg

ответ

Смежные вопросы