Remove Select arrow on IE

Question

I have select element  i want to remove the arrow  then i can add other icon   i can do that for Firefox Safari and Chrome  but this didn t work on IE9    styled-select select        border  0  important     Removes border       -webkit-appearance  none     Removes default chrome and safari style       -moz-appearance  none     Removes default style Firefox       background  url  select icon png    no-repeat       background-position  179px 7px       text-indent  0 01px       text-overflow           color   FCAF17       width 200px       SEE Fiddle on IE9  all what i need is remove the arrow in ie9 Please JSFIDDLE answer

User · Accepted Answer

In IE9  it is possible with purely a hack as advised by  Spudley   Since you ve customized height and width of the div and select  you need to change div before css to match yours   In case if it is IE10 then using below css3 it is possible  select  -ms-expand       display  none      However if you re interested in jQuery plugin  try Chosen js or you can create your own in js

User · Answer

I would suggest mine solution that you can find  in this GitHub repo  This works also for IE8 and IE9 with a custom arrow that comes from an icon font   Examples of Custom Cross Browser Drop-down in action  check them with all your browsers to see the cross-browser feature   Anyway  let s start with the modern browsers and then we will see the solution for the older ones   Drop-down Arrow for Chrome  Firefox  Opera  Internet Explorer 10   For these browser  it is easy to set the same background image for the drop-down in order to have the same arrow   To do so  you have to reset the browser s default style for the select tag and set new background rules  like suggested before    select          you should keep these firsts rules in place to maintain cross-browser behaviour        -webkit-appearance  none      -moz-appearance  none      -o-appearance  none      appearance  none      background-image  url   lt custom arrow image url here gt         background-position  98  center      background-repeat  no-repeat      outline  none              The appearance rules are set to none to reset browsers default ones  if you want to have the same aspect for each arrow  you should keep them in place   The background rules in the examples are set with SVG inline images that represent different arrows  They are positioned 98  from left to keep some margin to the right border  you can easily modify the position as you wish    In order to maintain the correct cross-browser behavior  the only other rule that have to be left in place is the outline  This rule resets the default border that appears  in some browsers  when the element is clicked  All the others rules can be easily modified if needed   Drop-down Arrow for Internet Explorer 8  IE8  and Internet Explorer 9  IE9  using Icon Font  This is the harder part    Or maybe not   There is no standard rule to hide the default arrows for these browsers  like the select  -ms-expand for IE10    The solution is to hide the part of the drop-down that contains the default arrow and insert an arrow icon font  or a SVG  if you prefer  similar to the SVG that is used in the other browsers  see the select CSS rule for more details about the inline SVG used    The very first step is to set a class that can recognize the browser  this is the reason why I have used the conditional IE IFs at the beginning of the code  These IFs are used to attach specific classes to the html tag to recognize the older IE browser   After that  every select in the HTML have to be wrapped by a div  or whatever tag that can wraps an element   At this wrapper just add the class that contains the icon font    lt div class  selectTagWrapper prefix-icon-arrow-down-fill  gt           lt  div gt    In easy words  this wrapper is used to simulate the select tag   To act like a drop-down  the wrapper must have a border  because we hide the one that comes from the select   Notice that we cannot use the select border because we have to hide the default arrow lengthening it 25  more than the wrapper  Consequently its right border should not be visible because we hide this 25  more by the overflow  hidden rule applied to the select itself   The custom arrow icon-font is placed in the pseudo class  before where the rule content contains the reference for the arrow  in this case it is a right parenthesis    We also place this arrow in an absolute position to center it as much as possible  if you use different icon fonts  remember to adjust them opportunely by changing top and left values and the font size     ie8  prefix-icon-arrow-down-fill before   ie9  prefix-icon-arrow-down-fill before       content           position  absolute      top  43       left  93       font-size  6px              You can easily create and substitute the background arrow or the icon font arrow  with every one that you want simply changing it in the background-image rule or making a new icon font file by yourself

User · Answer

In case you want to use the class and pseudo-class    simple-control is your css class   disabled is pseudo class  select simple-control disabled             For FireFox           -webkit-appearance  none            For Chrome           -moz-appearance  none       For IE10    select disabled simple-control  -ms-expand           display  none

[html] Remove Select arrow on IE

Examples related to html

Examples related to css

Examples related to html-select