Question

有没有办法在Chrome和IE中的<option>框中使用CSS制作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的问题相同，但没有答案。

Answer 1

你不能这样做。你会发现“在那里”的最可能的解决方案是添加硬编码风格的周围跨度，但IE（7）和Firefox（3.0.12）都不尊重这一点。

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

以下是关于如何做到这一点的一个很棒的“方法”：http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

Answer 2

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

使用CSS：

option.bold {
     font-weight:bold;
}

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

Answer 3

由于Chrome不允许在选项标记上加粗字体，因此您可以使用{/ 1}}属性

text-shadow

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

选择chrome中的下拉选项粗体

3 个答案: