title: How to remove gloss effect on safari
body: <p>Regarding <a href="https://stackoverflow.com/q/16593308/4295879">this question</a> and <a href="https://stackoverflow.com/questions/16593308/how-to-remove-gloss-effect-on-safari-mobile">this question</a>, My problem still hasn't been solved.
  The solution removed everything including the values, arrows and borders.</p>
  
  <p>My code goes like this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-control {
   display: block;
   width: 100%;
   height: 28px;
   padding: 6px 12px;
   font-size: 12px;
   line-height: 12;
   color: #666;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin-top:5px;
   -webkit-appearance:caret;
   }   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="form-control" value="number"&gt;
   &lt;option&gt;1&lt;/option&gt;
   &lt;option&gt;2&lt;/option&gt;
   &lt;option&gt;3&lt;/option&gt;
   &lt;option&gt;4&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>