Question

我需要摆脱optgroups中的标签。

但我需要用opgroups来做这件事。我不想删除它们。

<select>
  <optgroup>
    <option>1</option>
  </optgroup>
  <optgroup>
    <option>2</option>
  </optgroup>
  <optgroup>
    <option>3</option>
  </optgroup>
  <optgroup>
    <option>4</option>
  </optgroup>
</select>

Jsfiddle：http://jsfiddle.net/upXn8/

Answer 1

您可以使用：

select optgroup{
    display:none;
}

fiddle

有点奇怪的要求说实话。

Answer 2

select optgroup {
    display:none;
}

这不适用于firefox。您显示no将使组中的所有选项消失。

Answer 3

您可以使用与optgroup背景相同的颜色，并为选项

设置另一种颜色

optgroup{
    color:white;
}

optgroup option{
    color:black;
}

Answer 4

这更好，尝试一下！

optgroup {
        color: transparent;
        height: 0px;
    }

    optgroup option {
        color: inherit;
    }

Answer 5

派对有点晚了，但是：

optgroup { display: none; }

这在某些浏览器中不起作用，因为它会隐藏optgroup元素，但选项是该元素的子元素，因此它们也将被隐藏。您可以在子元素上设置display，但根据我的经验，这不起作用。

正常（并且语义更正确！）版本可以使用（在Chrome 42和IE 11中测试）如下：

optgroup {
  visibility: hidden;
}
optgroup option {
  visibility: visible;
}

遗憾的是，这将保留optgroup适用的间距（因为它不会从流中移除optgroup元素，它只是使其不可见），并且该间距不是填充/边距，所以这是远来自理想。

不太确定浏览器兼容性。

如何隐藏optgroup标签？

5 个答案: