html - 如何更改下拉列表中选择列表项的字体

Question

我有一个应用了给定字体的选择菜单。在代码中称为“WebSymbolsRegular”。现在我希望只有第一个菜单项没有应用这种字体。我正在使用 jquery mobile，当第一个元素显示在选择中时，我设法更改了它的字体，但是我无法更改下拉列表中第一个元素的字体，请参见图片:

所以“请选择条件评级”是完美的，但正如您在下拉列表中看到的那样，“WebSymbolsRegular”接管了我，我得到了乱码。我想改变这个。这是我的代码:

CSS: .stars .ui-btn-inner { 字体系列:'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 的第一次字体以正确阅读的任何想法？

Answer 1

在 jQuery Mobile 中，您可以选择使用非 native 选择菜单:

<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 来设置星号选项的样式，这些选项可以出现在弹出窗口、对话框和选择的选定文本中:

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

Here is a working DEMO