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/

Answer 1

this is better, try it!

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

    optgroup option {
        color: inherit;
    }

Answer 2

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

optgroup{
    color:white;
}

optgroup option{
    color:black;
}