在chrome中选择粗体下拉选项[重复]答案

【问题标题】：Select dropdown option bold in chrome [duplicate]在chrome中选择粗体下拉选项[重复]
【发布时间】：2012-07-17 05:11:39
【问题描述】：

有没有办法在 Chrome 和 IE 中使用 CSS 使 <option> 标记在 select 框中变为粗体？它在 Firefox 中运行。

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

这和here是同一个问题，但是没有答案。

【问题讨论】：

恭喜；愚蠢的 Chrome 开发人员现在默认将下拉菜单设置为粗体。享受吧。

标签： html css google-chrome drop-down-menu

【解决方案1】：

你不能这样做。您会发现“在那里”最有可能的解决方案是添加一个带有硬编码样式的环绕跨度，但 IE (7) 和 Firefox (3.0.12) 都不支持这一点。

您可以做的是使用 JavaScript 解决方案为您提供选择的外观，而无需实际使用选择。

这里有一个很棒的“操作指南”：http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

【讨论】：

有没有办法用javascript做到这一点？？

【解决方案2】：

我用<option class="bold">Bold Text here</option>

使用 CSS：

option.bold {
     font-weight:bold;
}

它适用于 Firefox（Mac 和 Windows）和 IE11，但不适用于 Chrome 或 Safari。

【讨论】：

【解决方案3】：

由于 Chrome 不允许在选项标签上使用粗体，您可以使用 text-shadow 属性，如

text-shadow: 0px 0px 0px black;

它将呈现相同的粗体外观并适用于所有浏览器。

【讨论】：

这对我在 Chrome 中的选项没有任何影响。