html - 如何在下拉菜单中更改选择列表元素的字体

我有一个选择菜单，其中已应用了给定的字体。在代码中，其名为“ WebSymbolsRegular”。现在，我希望仅第一个菜单项没有应用此字体。我正在使用jquery mobile，并且设法在选择按钮中显示第一个元素的字体时更改了它，但我无法在下拉菜单中更改第一个元素的字体，请参见图片：



因此，“请选择条件等级”是完美的选择，但是如您所见，在下拉列表中，“ WebSymbolsRegular”接管了我，使我感到胡言乱语。我想改变这个。这是我的代码：

CSS：
    .stars .ui-btn-inner
    {
      font-family：“ WebSymbolsRegular”；
      颜色：＃eab92d;
    }

.stars .ui-btn-inner .firstitem
{
  font-family: 'Lato' !important;
  color: white;
}

.firstitem
{
  font-family: 'Lato' !important;
}

需要.ui-btn-inner，因为jquery mobile将自己的标记添加到元素中。

HTML：

<span class="stars">
<select id="AddbookConditionSelect" style="color: #eab92d; font-family: WebSymbolsRegular;">
    <option value="0" class="firstitem">Please select a condition rating</option>
    <option value="1">R</option>
    <option value="2">RR</option>
    <option value="3">RRR</option>
    <option value="4">RRRR</option>
    <option value="5">RRRRR</option>
    </select>
</span>

使用R的原因是因为“ WebSymbolsRegular”字体将其更改为星形，这是所需的效果。关于如何更改drop的首次字体以正确读取的任何想法？

最佳答案

在jQuery Mobile中，您可以选择使用非本机选择菜单：

<span class="stars">
    <select id="AddbookConditionSelect" data-native-menu="false" >
        <option>Please select a condition rating</option>
        <option value="1" class="staritem">R</option>
        <option value="2" class="staritem">RR</option>
        <option value="3" class="staritem">RRR</option>
        <option value="4" class="staritem">RRRR</option>
        <option value="5" class="staritem">RRRRR</option>
    </select>
</span>

没有值的第一个选项将自动被视为占位符和弹出窗口标题，因此，您将获得非常简单的CSS来设置星形选项的样式，该选项可以出现在弹出窗口，对话框和select的选定文本中：

#AddbookConditionSelect-listbox li a, #AddbookConditionSelect-menu li a, .staritem{
   font-family: WebSymbols-Regular;
   color: #eab92d;
}
#AddbookConditionSelect-button {
   font-family: 'Lato', sans-serif ;
}

  这是工作中的DEMO