title: Style <select> element based on selected <option>
body: <p>Is it possible to style a <code>select</code> element based on what <code>option</code> is selected with CSS only? I am aware of existing <a href="https://stackoverflow.com/q/12601752/1176601">JavaScript solutions</a>.</p>
  <p>I tried to style the option element itself, but this will give style only to the option element in the list of options, not to the selected element.</p>
  <pre class="lang-css prettyprint-override"><code>select[name=&quot;qa_contact&quot;] option[value=&quot;3&quot;] {
    background: orange;
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/Aprillion/xSbhQ/" rel="nofollow noreferrer">http://jsfiddle.net/Aprillion/xSbhQ/</a></p>
  <p>If not possible with CSS 3, will <a href="http://www.w3.org/TR/selectors4/#subject" rel="nofollow noreferrer">CSS 4 subject selector</a> help in the future - or will this stay a forbidden fruit to CSS?</p>
  <p><em>Update 2022</em>: using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" rel="nofollow noreferrer"><code>:has</code></a> pseudo-class can help to style the select itself (in browsers that support both the <code>:has</code> pseudo-class and styling of <code>&lt;select&gt;</code>), but it only works for HTML attributes, so only if the select has the option explicitly selected initially. It will not work dynamically without JS - after the user changes selection, that will only change DOM properties, but not the HTML attributes on which CSS attribute selectors depend:</p>
  <pre class="lang-css prettyprint-override"><code>select:has(option[selected][value=&quot;3&quot;]) {
    background: orange;
  }
  </code></pre>