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

Question

我有一个应用了给定字体的选择菜单。在代码中它被称为WebSymbolsRegular＆＃39;。现在，我希望只有第一个菜单项没有应用此字体。我使用jquery mobile并且我设法改变第一个元素的字体，当它显示在选择但是我无法更改下拉列表中的第一个元素的字体时，请参见图片：

所以＆＃39;请选择一个条件等级＆＃39;是完美的，但正如你在WebSymbolsRegular＆＃39;下载中看到的那样。接管，我得到胡言乱语。我想改变这个。这是我的代码：

CSS：     .stars .ui-btn-inner     {       font-family：＆＃39; WebSymbolsRegular＆＃39 ;;       颜色：＃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的原因是因为＆＃39; WebSymbolsRegular＆＃39;字体将其更改为星号，这是所需的效果。关于如何更改drop首次正确读取字体的任何想法？

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

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

  

这是一个有效的 DEMO

Answer 2

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

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';}

请注意，如果您需要支持较旧的浏览器，则可以将您的＆＃34; firstitem＆＃34;它所在的类，并用这一个替换CSS的第二行：

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

Answer 3

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

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

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

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

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

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