Hide Default Select Drop down Arrow in IE9
11,921
Solution 1
You can use a pseudo-element for the drop-down arrow in IE.
select::-ms-expand {
display: none;
}
reference
- https://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx
- Select removing dropdown arrow
- Remove Select arrow on IE
Solution 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;
}
Author by
ItzMe_Ezhil
Am UI Developer / Front End Developer with 8 Yrs experience. Skils: HTML5, CSS3, RWD, JQuery, java script, Bootstrap 3.0/4.0/4.1, Angular2+,typescript, Angular Material CSS. Tools: Photoshop.
Updated on June 22, 2022Comments
-
ItzMe_Ezhil almost 2 years
Ihave tried css
appearance: none;
to hide select drop down arrow. But In IE9 arrow shows. For reference see the image.Any idea how to hide 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; }
-
Shanaka about 9 yearspossible duplicate of Remove Select arrow on IE
-
Alberto about 8 yearsthis is [another solution] for IE9 problem (stackoverflow.com/a/36137767/6094848)
-