How to hide optgroup label?

Question

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/

Matt

I'm curious why you would want to use <optgroup> without rendering it. The label and indentation of child options is the only benefit I'm aware of. – Stiffler

I need to style every option independently. The only solution as I know is to style optgroup. But they have those spacings, which i don`t want. – Matt

I'd recommend using classes on the <option> elements themselves. Here's an example: jsfiddle.net/upXn8/8 – Stiffler

If you style <option> you have very limited functionality. For example, you can`t do this Fiddle – Matt

Interesting. I'd be concerned about browser compatibility when it comes to this. Your example looks really strange in Chrome, as the font changes for the indentation as well, misaligning the names. – Stiffler

Yes, I know. But I need to have different fonts and that is the best solution for me at the moment. If you know another way tell me please. – Matt

Answer 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.

Uneventful

Answer 2

this is better, try it!

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

    optgroup option {
        color: inherit;
    }

Ethnomusicology

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

Answer 3

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

optgroup{
    color:white;
}

optgroup option{
    color:black;
}

Matteroffact

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

Answer 4

select optgroup {
    display:none;
}

This will not work on firefox. You display none will make all option in group disappear.

Boutique