title: How to style the <option> with only CSS?
body: <h2>Note: This question is not about making a custom dropdown. It's only about possibilities of styling <code>&lt;option&gt;</code> elements within the select element in CSS</h2>
  
  <p>How can I style <code>&lt;option&gt;</code>s of a <code>&lt;select&gt;</code> element with cross-browser compatibility? I know many JavaScript ways which customize the dropdown to convert into <code>&lt;li&gt;</code>, which I'm not asking about.</p>
  
  <pre><code>&lt;select class="select"&gt;
      &lt;option selected&gt;Select&lt;/option&gt;
      &lt;option&gt;Blue&lt;/option&gt;
      &lt;option &gt;Red&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Yellow&lt;/option&gt;
      &lt;option&gt;Brown&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I'm asking what could be possible with CSS only, with compatibility for IE9+, Firefox, and Chrome.</p>
  
  <p><img src="https://i.stack.imgur.com/5VO8b.jpg" alt="enter image description here"></p>
  
  <p>I want to style like this or as close as possible.</p>
  
  <p><img src="https://i.stack.imgur.com/28WXw.jpg" alt="enter image description here"></p>
  
  <p>I tried here <a href="http://jsfiddle.net/jitendravyas/juwz3/3/" rel="noreferrer">http://jsfiddle.net/jitendravyas/juwz3/3/</a>, but Chrome doesn't show any styling except font color, while Firefox shows some more. How to get border and padding work in Chrome too?</p>