如何在Bootstrap中選擇樣式

我爲我的下拉框使用Bootstrap select（https://silviomoreto.github.io/bootstrap-select/）。如何在Bootstrap中選擇樣式

<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 > .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

如何在Bootstrap中選擇樣式

回答

相關問題