How to remove the default arrow icon from a dropdown list select element

Question

I want to remove the dropdown arrow from a HTML  lt select gt  element  For example    lt select style  width 30px -webkit-appearance  none   gt       lt option gt 2000 lt  option gt       lt option gt 2001 lt  option gt       lt option gt 2002 lt  option gt           lt  select gt    How to do it in Opera  Firefox and Internet Explorer

User · Answer

Try this it works for me    x000D   x000D   lt style gt  x000D      select  x000D          border  0  important     Removes border   x000D          -webkit-appearance  none  x000D          -moz-appearance  none  x000D          appearance  none  x000D          text-overflow     x000D          text-indent  0 01px     Removes default arrow from firefox   x000D          text-overflow         Removes default arrow from firefox   x000D        x000D      select  -ms-expand   x000D          display  none  x000D        x000D       select-wrapper x000D        x000D          padding-left 0px  x000D          overflow hidden  x000D        x000D   lt  style gt  x000D       x000D   lt div class  select-wrapper  gt  x000D        lt select gt       lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    You can not hide but using overflow hidden you can actually make it disappear

User · Answer

The previously mentioned solutions work well with chrome but not on Firefox   I found a Solution that works well both in Chrome and Firefox not on IE   Add the following attributes to the CSS for your SELECTelement and adjust the margin-top to suit your needs   select       -webkit-appearance  none      -moz-appearance  none      text-indent  1px      text-overflow          Hope this helps

User · Answer

Works for all browsers and all versions   JS  jQuery document  ready function              var widthOfSelect       first   width        widthOfSelect   widthOfSelect - 13        alert widthOfSelect       jQuery   first   wrap   lt div id  sss  style  width    widthOfSelect  px  overflow  hidden  border-right   000 1px solid   width 20 gt  lt  div gt           HTML   lt select class  first  id  first  gt     lt option gt option1 lt  option gt     lt option gt option2 lt  option gt     lt option gt option3 lt  option gt   lt  select gt

User · Answer

Try This   HTML    lt div class  customselect  gt       lt select gt       lt option gt 2000 lt  option gt       lt option gt 2001 lt  option gt       lt option gt 2002 lt  option gt       lt  select gt   lt  div gt    CSS    customselect       width  70px      overflow  hidden      customselect select      width  100px     -moz-appearance  none     -webkit-appearance  none     appearance  none

User · Answer

there s a library called DropKick js that replaces the normal select dropdowns with HTML CSS so you can fully style and control them with javascript  http   dropkickjs com

User · Answer

You cannot do this with a fully functional cross browser support   Try taking a div of 50 pixels suppose and float a desired drop-down icon of your choice at the right of this    Now within that div  add the select tag with a width of 55 pixels maybe  something more than the container s width   I think you ll get what you want   In case you do not want any drop icon at the right  just do all the steps except for floating the image at the right  Set outline 0 on focus for the select tag  that s it

User · Answer

Just wanted to complete the thread   To be very clear this does not works in IE9  however we can do it by little css trick    lt div class  customselect  gt       lt select gt       lt option gt 2000 lt  option gt       lt option gt 2001 lt  option gt       lt option gt 2002 lt  option gt       lt  select gt   lt  div gt    customselect       width  80px      overflow  hidden     border 1px solid      customselect select      width  100px     border none    -moz-appearance  none     -webkit-appearance  none     appearance  none

User · Answer

Try this    select       -webkit-appearance  none      -moz-appearance  none      appearance  none      padding  2px 30px 2px 2px      border  none      JS Bin   http   jsbin com aniyu4 2 edit  If you use Internet Explorer    select       overflow hidden      width  120       Or you can use Choosen   http   harvesthq github io chosen

User · Answer

There s no need for hacks or overflow  There s a pseudo-element for the dropdown arrow on IE   select  -ms-expand       display  none

User · Answer

select  padding  11px 50px 11px 10px  background  rgba 255 255 255 1   border-radius  7px  -webkit-border-radius  7px  -moz-border-radius  7px  border  0  -webkit-appearance  none  -moz-appearance  none  appearance  none  color   8ba2d4

User · Answer

Simple way to remove drop down arrow from select   x000D   x000D  select   x000D       for Firefox    x000D    -moz-appearance  none  x000D       for Chrome    x000D    -webkit-appearance  none  x000D    x000D   x000D     For IE10    x000D  select  -ms-expand   x000D    display  none  x000D    x000D   lt select gt  x000D     lt option gt 2000 lt  option gt  x000D     lt option gt 2001 lt  option gt  x000D     lt option gt 2002 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

As I answered in Remove Select arrow on IE  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] How to remove the default arrow icon from a dropdown list (select element)?

Examples related to html

Examples related to css

Examples related to drop-down-menu

Examples related to html-select