title: How to change colour of blue highlight on select box dropdown
body: <p>How do I change the blue highlight on this dropdown please?</p>
  
  <p><a href="http://www.playground.jonathanlyon.com/ark/dropdown.html" rel="noreferrer">link to select box demo</a></p>
  
  <p>I'd like to change the highlight color to gray if this is possible.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    border: 0;
    color: #EEE;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 10px;
    width: 378px;
    *width: 350px;
    *background: #58B14C;
    -webkit-appearance: none;
  }
  
  #mainselection {
    overflow: hidden;
    width: 350px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 1px 1px 11px #330033;
    background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mainselection"&gt;
    &lt;select&gt;
      &lt;option&gt;Select an Option&lt;/option&gt;
      &lt;option&gt;Option 1&lt;/option&gt;
      &lt;option&gt;Option 2&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>