Hide by default Select Drop Down Arrow in IE9

Question

Demo

I tried css appearance: none; to hide the down arrow. But in IE9 arrows are shown. For reference, see Image.

Any idea to hide the arrow using css or jquery?

Here is my code:

  .fields-set select{ height:32px; border:1px solid #ccc; margin: 0 19px 0 1%; padding:0 32px 0 1%; width:55%; float: left; overflow: hidden; background:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR3xT6PSVebCcTYjggESCb55GBM91fGgbyrMFbs3CGeFoQjFwVB") no-repeat scroll right center padding-box border-box #FFF; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none \9; -o-appearance: none; } 

Answer 1

You can use pseudo-element to drop-down arrow in IE.

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

link

• https://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx
• Select Delete Down Arrow
• Delete Select arrow in IE

Answer 2

 Try this .myclass::-ms-expand{display:none} .myclass{ -moz-appearance:none; -webkit-appearance:none; text-indent:0.01px; text-overflow:''; background:url('https://www.holidayme.com/Images/uparrow.jpg') no-repeat 95% center #fff; border:1px solid #ccc; width:100%;border-radius:0; color:#666;border-radius:3px; width:200px; padding:10px 5px; } 

check the script for more ...