title: How can I change the background color of an <option> element in Google Chrome?
body: <p>I'm having trouble setting the background color (and text color) for the options in a <code>&lt;select&gt;</code> list in Google Chrome.</p>
  
  <p>Seems to work fine in Firefox:</p>
  
  <p><a href="https://i.stack.imgur.com/vfmYA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vfmYA.png" alt="Screen shot 2012-02-08 at 11.57.38 AM.png"></a>
  </p>
  
  <p>But not in Google Chrome:</p>
  
  <p>Closed:</p>
  
  <p><a href="https://i.stack.imgur.com/etNMV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/etNMV.png" alt=""></a>
  </p>
  
  <p>Open:</p>
  
  <p><a href="https://i.stack.imgur.com/Gf63W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gf63W.png" alt="Screen shot 2012-02-08 at 11.59.00 AM.png"></a>
  </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          select
          {
              background:yellow!important;
          }
          option
          {
              background:red!important;
          }
          .c1
          {
              background-color:green!important;
              color:red!important;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;select&gt;
      &lt;option class="c1"&gt;nice long option name&lt;/option&gt;
      &lt;option class="c2"&gt;nice long option name&lt;/option&gt;
      &lt;option class="c3"&gt;nice long option name&lt;/option&gt;
      &lt;option class="c4"&gt;nice long option name&lt;/option&gt;
      &lt;option class="c5"&gt;nice long option name&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I wonder if Google Chrome is using it's own elements or perhaps elements of the host operating system to render the select box and perhaps this is why it doesn't work? Perhaps it's a good thing because those colors look fairly horrendous, but it would be nice if Chrome offered a little bit more control.</p>