如何在單擊時設計<select>的外觀？

我注意到，當你點擊一個<select>element in Twitter Bootstrap時，彈出的選項有無格式的字體。如何在單擊時設計<select>的外觀？

Default元素，用黑體文字：

enter image description here

無樣式元素，宋體文字（？）：

enter image description here

有什麼辦法樣式當您單擊顯示的內容在<select>元素，還是這取決於瀏覽器？

它在基本Bootstrap中不是很明顯，但是我使用了不同的（襯線字體）字體，並且它的字體很差。

來源

2013-01-07 Richard

意識到，這可能是 – Jason

您使用的自舉選的是iOS具體問題？ – scrappedcola

'select'元素非常非常*非常*難以（也許完全不可能）用CSS可靠地設計樣式。如果外觀很重要，你可能更適合樣式化'ul'或'ol'，這樣更能接受樣式，但需要JavaScript來提供功能。 –

您可以使用類似於bootstrap-select東西。如果你是當你有這樣的：

<select class='selectPicker'> 
    <option>1</option> 
    <option>2</option> 
</select>

並申請使用的是美化任何插件，發生這種情況，你的元素：

<select class="selectpicker" style="display: none;"> 
     <option>Mustard</option> 
     <option>Ketchup</option> 
     <option>Relish</option> 
    </select> 
<div class="btn-group bootstrap-select open"> 
    <button data-toggle="dropdown" class="btn dropdown-toggle clearfix"> 
    <span class="filter-option pull-left">1</span>&nbsp;<span class="caret"></span> 
    </button> 
    <div role="menu" class="dropdown-menu"> 
     <ul style="max-height: none; overflow-y: auto;"> 
      <li rel="0"><a href="#" tabindex="-1">1</a></li> 
      <li rel="1"><a href="#" tabindex="-1">2</a></li> 
     </ul> 
    </div> 
</div>

所以你的CSS將不得不針對<ul>是實際展示你的內容。 .dropdown-menu{ font-family: serif; }

來源

2013-01-07 23:15:06 scrappedcola

有用於造型SELECT框選擇非常有限，但是font-family應該工作：

select { font-family: serif; }

來源

2013-01-07 22:59:04

不，我已經在CSS中獲得了它 - 它在非活動狀態下確定它的樣式，但在單擊時不會。 – Richard

我的猜測是有其他的CSS覆蓋你的字體系列聲明。 –

也許如此 - 如果是這樣，Bootstrap基礎上也是如此。 – Richard

我認爲，除了select{font-family :yourFont;}你必須嵌入字體在CSS

來源

2013-01-08 10:21:36

如何在單擊時設計<select>的外觀？

回答

相關問題