How to hide optgroup label?

Question

I need to get rid of labels in optgroups.

From this: http://i.stack.imgur.com/Gn5e5.png

Into this: http://i.stack.imgur.com/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 1

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.

Solution 2

you can use the same color as the optgroup background and set another color for option

optgroup{
    color:white;
}

optgroup option{
    color:black;
}

Solution 3

this is better, try it!

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

    optgroup option {
        color: inherit;
    }

Comments

[Rafe]

color: transparent is much better approach. however it won't solve problem yet

[Rafe]

nice approach, but doesn't work on my chrome 88. the gap is still there