title: How to remove underline rule on dropdown options?
body: <p>I've got the following DOM :</p>
  
  <pre><code>&lt;select&gt;
      &lt;optgroup label="a"&gt;
          &lt;option class="foo"&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="b"&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>That I want to do is to underline the <code>optgroup</code>'s label, but not <code>option</code>'s one.</p>
  
  <p>So I wrote this CSS:</p>
  
  <pre><code> optgroup {
       text-align: left;
       color: #222;
       text-decoration: underline;
   }
  
   optgroup option {
       color: red;
       text-decoration: none;
   }
  
  optgroup option.foo {
       color: green;
       text-decoration: none;
   }
  </code></pre>
  
  <p>And I get the following output (from <a href="http://jsfiddle.net/j8d3G/" rel="nofollow noreferrer">JSFiddle</a>):</p>
  
  <p><img src="https://i.stack.imgur.com/j1571.png" alt="enter image description here"></p>
  
  <p>What did I miss to remove the option's underline?
  I'm working on Firefox 17.</p>