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

Question

我注意到当你点击 <select> element in Twitter Bootstrap ，弹出的选项有无样式的字体。

默认元素，带有 Helvetica 文本:

无样式元素，带有 Arial(?) 文本:

有什么方法可以设置当您点击 <select> 时出现的内容的样式吗？元素，还是取决于浏览器？

它在基本 Bootstrap 中不是很明显，但我使用的是不同的(衬线)字体，而且效果很差。

Answer 1

您可以使用类似于 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; }