title: Looking for HTML5 <select> element CSS3 styling solution: no image files, cross-browser compatible
body: <p>I am looking for styling solution to apply to HTML <code>&lt;select&gt;</code> element (i.e. web form drop-down) as described below:</p>
  
  <ol>
  <li>Pure HTML5/CSS3 implementation</li>
  <li>No any reliance on Javascript or other scripting languages</li>
  <li>Cross-browsers compatibility (FF/Chrome/Safari/IE10)</li>
  </ol>
  
  <p>Currently I'm using the following CSS3 snippet for styling <code>&lt;select&gt;</code> element:</p>
  
  <pre><code>select {
      font-size:9pt;
      letter-spacing:0.07em;
      color:#808080;
      background:transparent;
      border: solid 1px #808080;
      padding:3px;
      cursor:pointer;
  }
  select option { padding: 1px 5px 1px 3px;}
  select option[selected]{ color:#303030; }
  select option:nth-child(even) { background-color:#e5e5e5; }
  </code></pre>
  
  <p>Sample implementation: <a href="http://busNY.net" rel="nofollow noreferrer"><strong>here</strong></a></p>
  
  <p>I would like to find out about other available <strong>'pure CSS3' styling options to apply to the inner button (with that little downward triangle) of HTML <code>&lt;select&gt;</code> element</strong>, i.e., its background, color, border, font properties, etc.</p>