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

我有一个应用了给定字体的选择菜单。在代码中称为“WebSymbolsRegular”。现在我正在寻找只有第一个菜单项没有应用此字体的情况。我正在使用jquery mobile，并且设法改变第一个元素的字体，当它显示在select中时，我无法改变第一个元素的下拉字体，参见图片：如何在下拉菜单中更改选择列表项的字体

enter image description here

所以'请选择一个条件评级'是完美的，但正如您在下拉菜单中看到'WebSymbolsRegular'接管并且我收到了乱码。我想改变这一点。这里是我的代码有：

CSS： .stars的.ui-BTN-内 { FONT-FAMILY： 'WebSymbolsRegular'; color：＃eab92d; }

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

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

的的.ui-BTN-内需要东阳的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”字体改变这对分这是所期望的效果。关于如何更改放置首次字体以正确阅读的任何想法？

来源

2015-01-14 user481610

试试这个............（.stars选择{FONT-FAMILY：拉托}） – anujsoft

使用jQuery在你的选择项目 $（'classItem'）。css（'font-style'，'italic'）; – ErasmoOliveira

'#AddbookConditionSelect选项：first-child {font-family：Lato;}' – Slime

在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

来源

2015-01-14 16:24:14 ezanker

问题是您的内联样式将会否决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';}

来源

2015-01-14 12:45:29

因此，根据您所提供的东西，我注意到，有一个内嵌样式：

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

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

您可以通过删除尝试，然后放置在CSS：

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

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

来源

2015-01-14 12:45:29 Adib

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

回答

相关问题