如何更改选择框的样式'optgroup标签
我在我的应用程序中有一个简单的选择框和选项组。如何更改选择框的样式'optgroup标签
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
----
----
----
</select>
当它在浏览器中显示时,选项组标签以粗体和斜体显示;我希望它在没有任何这些样式的情况下显示。
不幸的是,选择框是少数几个可以添加CSS样式的东西之一。您通常仅限于浏览器如何呈现它。
例如,它看起来像这样在镀铬:
这在Firefox:
你可以只使用CSS样式选择框,它需要一个排序工作:
首先,你用div包围它并给出一个类:
<div class="selectStyle">
<select>
<option>First Option</option>
<option>Second Option</option>
</select>
</div>
然后你要确保选择元素使用的CSS样式以某种方式:
.selectStyle select {
background: transparent;
width: 250px;
padding: 4px;
font-size: 1em;
border: 1px solid #ddd;
height: 25px;
}
而且你的风格股利:
.selectStyle {
width: 235px;
height: 25px;
overflow: hidden;
background: url(yourArrow.png) no-repeat right #ccc;
}
我想只显示optgroup标签 – gnanz
然后你只需定位optgroup:optgroup [label =“Swedish Cars”] – 2011-09-17 05:17:25
Gnanz正在谈论标签属性。具体关于optgroup并没有真正解决他的问题。 –
在大多数浏览器(在最新的IE浏览器测试和FF),您只需使用CSS轻松更改optgroup的标签即可:
select optgroup{
background:#000;
color:#fff;
font-style:normal;
font-weight:normal;
}
显然,您可以设置任何类名而不是选择html标记。
顺便说一下,正如其他答案所说,仍然有很少的CSS选项用于选择框,许多网站管理员使用user949847给出的方法覆盖它们。但上面的代码应该足以满足您的需求。
风格的Firefox使用此规则标签:
optgroup:before {
content: attr(label);
display: block;
}
你可以将其覆盖。
你是一个传奇人物。这是一种享受。我正在标记你... –
对于不同的方法来规避样式optgroups的问题,我建议使用禁用的选项。
<option disabled>[group label]</option>
你可以通过例如在样式上有一个镜头。
<style> [disabled] { color:#000; background-color:#CCC } </style>
我注意到这不适用于移动设备。有没有办法做到这一点? – riotgear
所以这意味着我们不能使用显示选项组标签,在上面的截图瑞典车和美国车覆盖式的浏览器吗?我婉显示标准字体的粗细这些标签的所有浏览器。 我想显示所有浏览器的正常字体。 – gnanz
是的,不幸的是,你不能用CSS浏览器的Chrome浏览器的一部分。 – wesbos
由Helrik给出的css给火狐工作 – gnanz