title: Remove select arrow in IE
body: <p>I removed the drop down arrow from a select element using a method found here on SO<br><a href="https://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox">How to remove the arrow from a select element in Firefox</a><br> but I still need a solution for IE. Any advice?<br><a href="http://jsfiddle.net/j9LFS/3/" rel="nofollow noreferrer">jsfiddle</a><br>HTML:<br></p>
  
  <pre><code>&lt;div class="select-wrap"&gt;
    &lt;select class="input-country" name="country"&gt;
      &lt;option value=""&gt;-Select Country-*&lt;/option&gt;
      &lt;option value="US" selected="selected"&gt;USA&lt;/option&gt;
      &lt;option value="AF"&gt;AFGHANISTAN&lt;/option&gt;
      &lt;option value="AL"&gt;ALBANIA&lt;/option&gt;
    &lt;/select&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>CSS:<br></p>
  
  <pre><code>.select-wrap {
  width: 340px;
  height: 40px;
  
  border: 1px solid black;
  }
  select {
  width: 340px;
  height: 100%;
  margin: auto 0;
  padding-bottom: 4px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: ''; 
  }
  </code></pre>
  
  <p>I would appreciate a CSS-only solution.</p>