CSS Select box arrow style

Question

I want to remove the default arrow from the select box and want to use custom icon  From the previous answers on SO  I have found out that it is not possible  to make it work with major browsers   Only possibility is to wrap the select inside a div  and set its width more than the div width and setting overflow  hidden  I am trying following  but it does not work  What I m doing wrong    x000D   x000D   selectParent   x000D    width  80px  x000D    overflow  hidden  x000D    x000D   x000D   selectParent select   x000D    width  100px  x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D    padding  2px 30px 2px 2px  x000D    border  none  x000D    background  transparent url  http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png   no-repeat right center  x000D    x000D   lt div class  selectParent  gt  x000D     lt select gt  x000D       lt option value  1  gt Option 1 lt  option gt  x000D       lt option value  2  gt Option 2 lt  option gt             x000D      lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    JSFiddle  http   jsfiddle net gcPmC

User · Answer

Please follow the way like below    x000D   x000D   selectParent   x000D   width 120px  x000D   overflow hidden     x000D    x000D   selectParent select    x000D   display  block  x000D   width  100   x000D   padding  2px 25px 2px 2px   x000D   border  none   x000D   background  url  http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png   right center no-repeat   x000D   appearance  none   x000D   -webkit-appearance  none  x000D   -moz-appearance  none   x000D    x000D   selectParent left select   x000D   direction  rtl  x000D   padding  2px 2px 2px 25px  x000D   background-position  left center  x000D    x000D     for IE and Edge     x000D  select  -ms-expand    x000D   display  none   x000D    x000D   lt div class  selectParent  gt  x000D     lt select gt  x000D       lt option value  1  gt Option 1 lt  option gt  x000D       lt option value  2  gt Option 2 lt  option gt             x000D      lt  select gt  x000D   lt  div gt  x000D   lt br   gt  x000D   lt div class  selectParent left  gt  x000D     lt select gt  x000D       lt option value  1  gt Option 1 lt  option gt  x000D       lt option value  2  gt Option 2 lt  option gt             x000D      lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try to replace the  padding  2px 30px 2px 2px    with  padding  2px 2px 2px 2px    It should work

[html] CSS Select box arrow style

Examples related to html

Examples related to css