Search code examples
htmlhtml-selectoptgroup

How to hide optgroup label?

I need to get rid of labels in optgroups.

From this: https://i.sstatic.net/Gn5e5.png

Into this: https://i.sstatic.net/ZvRM7.png

But I need to do this with opgroups. I don`t want to delete them.

<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/

Solution

  • A bit late to the party, but:

    optgroup { display: none; }

    This is not going to work in some browsers because it is going to hide the optgroup element but options are children of that element and so they will be hidden too. You could set a display on the child elements but in my experience this doesn't work.

    A correct (and more semantically correct!) version that will work (tested in Chrome 42 and IE 11) is the following:

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

    This will unfortunately keep the spacing that the optgroup applies (as it doesn't remove the optgroup element from flow, it just makes it invisible), and that spacing is not padding/margin, so this is far from ideal.

    Not so sure of browser compatibility, however.