title: CSS: Remove gray highlight on a default option in a select element
body: <p>This problem just happens on IE, tested with IE11.</p>
  
  <p>In order to hide the placeholder in any browser, except IE, the <strong>display none</strong> does the job. However with IE the solution is a lit bit more elaborated. The idea is to make the <strong>default option disabled</strong>, then the user can't click back on the placeholder.</p>
  
  <p>So far so good, but here comes the problem now:</p>
  
  <p><img src="https://i.stack.imgur.com/57IXf.png" alt="enter image description here"></p>
  
  <p>This shadow + highlight in gray are not desired.</p>
  
  <h1>How to reproduce (Please use IE...)</h1>
  
  <ol>
  <li><p>JsFiddle: <a href="http://jsfiddle.net/lcustodio/u8ng9ybf/4/" rel="nofollow noreferrer">http://jsfiddle.net/lcustodio/u8ng9ybf/4/</a></p></li>
  <li><p>Stack Snippet:</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.default-option {
    display: none;
  }
  select::-ms-value {
    background: none;
    color: #42413D;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;option disabled selected class='default-option'&gt;Select...&lt;/option&gt;
    &lt;option&gt;Hello&lt;/option&gt;
    &lt;option&gt;World&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>*ps: I already remove the blue highlight on the selected option based on this <a href="http://jnelson.in/css/remove-blue-highlighting-select-element-internet-explorer/jacob-nelson" rel="nofollow noreferrer">hint</a>. Refer to the css on fiddle as well.</p>