0

I removed the drop down arrow from a select element using a method found here on SO
How to remove the arrow from a select element in Firefox
but I still need a solution for IE. Any advice?
jsfiddle
HTML:

<div class="select-wrap">
  <select class="input-country" name="country">
    <option value="">-Select Country-*</option>
    <option value="US" selected="selected">USA</option>
    <option value="AF">AFGHANISTAN</option>
    <option value="AL">ALBANIA</option>
  </select>
<div>

CSS:

.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: ''; 
}

I would appreciate a CSS-only solution.

Community
  • 1
  • 1
Esser
  • 540
  • 1
  • 4
  • 16

1 Answers1

4

Try this:

select::-ms-expand {
display: none;
}

Note that this works on IE10+

Karim AG
  • 2,166
  • 15
  • 29