title: Css selector for only the <select> element without its <option> tags IE8
body: <p>I would like to color (i.e. highlight as erroneous) a <code>select</code> element, but not its <code>option</code> tags. In FF I achieve this by applying a style to the <code>select</code> element and applying another style to the <code>option</code> tags. Here are the styles:</p>
  
  <pre><code>.highlight{
      background-color: #FB6F6E;
  }
  
  .highlight &gt; option{
      background: #dfdfdf;
  }
  </code></pre>
  
  <p>This looks as I want in FF (16.0.1),</p>
  
  <p><img src="https://i.stack.imgur.com/ySTuo.png" alt="enter image description here"></p>
  
  <p>but in IE8 (quirks mode) all options are colored:</p>
  
  <p><img src="https://i.stack.imgur.com/jgacD.png" alt="enter image description here"></p>
  
  <p>So is there a way to achieve this in IE8?</p>
  
  <p><strong>EDIT</strong> I would preferably use something that does not involve giving classes to <code>option</code> tags or using javascript. I know those solutions work, but it feels sort of a hack. Maybe the DOCTYPE issue solves the problem, I just wonder if adding a DOCTYPE would alter the current design.</p>
  
  <p><strong>EDIT</strong> As some of you suggested, I have added a DOCTYPE (HTML 4.01 Transitional). IE8 is still in quirks mode, but the selectbox is rendered a little bit differently:</p>
  
  <p><img src="https://i.stack.imgur.com/Sn1OB.png" alt="enter image description here"></p>
  
  <p>The border of the select is red, but still not the whole selectbox. Any ideas?</p>