如何更改下拉列表中选择列表项的字体答案

【问题标题】：How to change font of select list items in the drop down如何更改下拉列表中选择列表项的字体
【发布时间】：2015-03-12 15:32:25
【问题描述】：

我有一个应用了给定字体的选择菜单。在代码中，它被称为“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 的第一次字体以正确阅读的任何想法？

【问题讨论】：

试试这个............ (.stars select{font-family:Lato})
在你选择的项目中使用 jquery $('classItem').css('font-style','italic');
#AddbookConditionSelect option:first-child {font-family: Lato;}

标签： html css jquery-mobile fonts

【解决方案1】：

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

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

这是一个有效的DEMO

【讨论】：

【解决方案2】：

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

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

当存在内联样式时，它会覆盖任何其他样式。

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

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

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

【讨论】：

【解决方案3】：

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

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”类保留在原处，并将 CSS 的第二行替换为此：

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

【讨论】：