如何更改下拉列表中 select 列表项的字体

Question

我有一个应用了给定字体的 select 菜单。在代码中它被称为 'WebSymbolsRegular'。现在我希望只有第一个菜单项没有应用这种字体。我正在使用 jquery 移动设备，当第一个元素显示在 select 中时，我设法更改了第一个元素的字体，但是我无法在下拉列表中更改第一个元素的字体，请参阅图片：

所以 'Please select a condition rating' 是完美的，但正如您在下拉列表中看到的那样，'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 移动设备将自己的标记添加到元素。

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

问题在于您的内联样式会否决 CSS 文件中的任何内容，包括 !important 语句。现在您可能想尝试 CSS3 伪选择器 :first-child 并删除 "firstitem" class。我会那样做（我保留了你的 HTML 虽然我宁愿给你的 select 元素一个 "stars" class 而不是使用额外的跨度）：

HTML

<span class="stars">
<select id="AddbookConditionSelect">
    <option value="0">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>

CSS

.stars option { font-family: 'WebSymbolsRegular'; color: #eab92d; }
.stars option:first-child {font-family: 'Lato';}

请注意，如果您需要支持旧版浏览器，您可以将 "firstitem" class 保留在原处，并将 CSS 的第二行替换为这一行：

.stars option.firstitem {font-family: 'Lato';}

Answer 2

因此，根据您提供的内容，我注意到有一个内联样式：

<select id="AddbookConditionSelect" style="color: #eab92d; font-family: WebSymbolsRegular;">

当有内联样式时，它会否决任何其他样式。

您可以尝试删除它，然后放入 CSS:

#AddbookConditionSelect select {
   font-family: 'Lato';
}

#AddbookConditionSelect select:not(:first-child) {
   font-family: 'WebSymbolsRegular';
}

Answer 3

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

<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编辑 select 的文本：

#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

如何更改下拉列表中 select 列表项的字体

How to change font of select list items in the drop down

html

css

fonts

jquery-mobile