如何更改选择框的样式'optgroup标签

我在我的应用程序中有一个简单的选择框和选项组。如何更改选择框的样式'optgroup标签

<select> 
    <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
</optgroup> 
    ---- 
    ---- 
    ---- 
</select>

当它在浏览器中显示时，选项组标签以粗体和斜体显示;我希望它在没有任何这些样式的情况下显示。

来源

2011-09-17 gnanz

不幸的是，选择框是少数几个可以添加CSS样式的东西之一。您通常仅限于浏览器如何呈现它。

例如，它看起来像这样在镀铬：

这在Firefox：

enter image description here

来源

2011-09-17 04:51:14 wesbos

所以这意味着我们不能使用显示选项组标签，在上面的截图瑞典车和美国车覆盖式的浏览器吗？我婉显示标准字体的粗细这些标签的所有浏览器。我想显示所有浏览器的正常字体。 – gnanz

是的，不幸的是，你不能用CSS浏览器的Chrome浏览器的一部分。 – wesbos

由Helrik给出的css给火狐工作 – gnanz

你可以只使用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; 
}

来源

2011-09-17 05:03:40

我想只显示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给出的方法覆盖它们。但上面的代码应该足以满足您的需求。

来源

2012-07-19 08:19:22 Helrik

适用于Firefox，但它仍无法修复IE – gnanz

截止到目前为止，在IE10，FF21，Chrome28和Opera12中工作。（对不起，没有安装Safari！）注意：在大多数提到的浏览器中，整个部分都是样式的，而不仅仅是标签。 –

如果您将样式应用于'option'标签以及'optgroup'标签，则可以在不更改列表项的标准显示的情况下有效控制标签的显示。 – jatrim

风格的Firefox使用此规则标签：

optgroup:before { 
    content: attr(label); 
    display: block; 
}

你可以将其覆盖。

来源

2013-02-06 14:13:29 nniico

你是一个传奇人物。这是一种享受。我正在标记你... –

-1

对于不同的方法来规避样式optgroups的问题，我建议使用禁用的选项。

<option disabled>[group label]</option>

你可以通过例如在样式上有一个镜头。

<style> [disabled] { color:#000; background-color:#CCC } </style>

来源

2013-11-08 10:02:26 Risingson

如何更改选择框的样式'optgroup标签

回答

相关问题