单击时如何设置<select>的外观样式？</select>

Question

我注意到，当您点击<select> element in Twitter Bootstrap时，弹出的选项会包含无格式字体。

默认元素，使用Helvetica文本：

非样式元素，带有Arial（？）文本：

有没有办法设置点击<select>元素时显示的内容，还是取决于浏览器？

它在基本Bootstrap中并不是很明显，但我使用的是另一种（serif）字体，并且它非常糟糕。

Answer 1

样式SELECT框的选项非常有限，但font-family应该有效：

select { font-family: serif; }

Answer 2

您可以使用与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; }

Answer 3

我认为除了select{font-family :yourFont;}之外，你必须在CSS中嵌入字体