Select arrow style change

Question

I m trying to replace the arrow of a select with a picture of my own  I m including the select in a div with the same size  I set the background of the select as transparent and I m including a picture with the same size as the arrow  in the right top corner of the div as background    It only works in Chrome       How can I make it work in Firefox and IE9 where I m getting this       x000D   x000D   styled-select   x000D    width  100px  x000D    height  17px  x000D    overflow  hidden  x000D    overflow  -moz-hidden-unscrollable  x000D    background  url images downarrow blue png  no-repeat right white  x000D    border  2px double red  x000D    display  inline-block  x000D    position  relative  x000D    x000D   x000D   styled-select select   x000D    background  transparent  x000D    -webkit-appearance  none  x000D    width  100px  x000D    font-size  11px  x000D    border  0  x000D    height  17px  x000D    position  absolute  x000D    left  0  x000D    top  0  x000D    x000D   x000D  body   x000D    background-color   333333  x000D    color   FFFFFF  x000D    x000D   x000D   block label   x000D    color  white  x000D    x000D   lt HTML gt  x000D   x000D   lt HEAD gt  x000D   lt  HEAD gt  x000D   x000D   lt BODY gt  x000D     lt p  gt  x000D     lt form action   prepareUpdateCategoryList do forwardto search  gt  x000D   x000D       lt fieldset class  block  id  searchBlock  gt  x000D         lt p gt  x000D           lt label style  width 80px  gt Class lt  label gt  x000D           lt div class  styled-select  gt  x000D             lt select property  voucherCategoryClass  gt  x000D         lt option value  0  gt Select  lt  option gt  x000D         lt option value  7382  gt steam  lt  option gt  x000D        lt  select gt  x000D           lt  div gt  x000D   x000D         lt  p gt  x000D       lt  fieldset gt  x000D     lt  form gt  x000D   lt  BODY gt  x000D   x000D   lt  HTML gt  x000D   x000D   x000D

User · Answer

I have referred this post  it worked like charm   except it did not hide the arrow in IE browser       However adding following hides the arrow in IE     x000D   x000D   amp   -ms-expand   x000D        display  none  x000D        x000D   x000D   x000D       Complete solution   sass      x000D   x000D   select-border-color   ccc  x000D   select-focus-color  green  x000D   x000D  select   x000D   x000D      cursor  pointer  x000D         styling    x000D      background-color  white  x000D      border  1px solid  select-border-color  x000D      border-radius  4px  x000D      display  inline-block  x000D      font  inherit  x000D      line-height  1 5em  x000D      padding  0 5em 3 5em 0 5em 1em  x000D   x000D         reset    x000D      margin  0  x000D      -webkit-box-sizing  border-box  x000D      -moz-box-sizing  border-box  x000D      box-sizing  border-box  x000D      -webkit-appearance  none  x000D      -moz-appearance  none  x000D   x000D      background-image  linear-gradient 45deg  transparent 50    select-border-color 50    x000D      linear-gradient 135deg   select-border-color 50   transparent 50    x000D      linear-gradient to right   select-border-color   select-border-color   x000D      background-position  calc 100  - 20px  calc 1em   2px   x000D      calc 100  - 15px  calc 1em   2px   calc 100  - 2 5em  0 5em  x000D      background-size  5px 5px  5px 5px  1px 1 5em  x000D      background-repeat  no-repeat  x000D   x000D         Very imp  hide arrow in IE    x000D       amp   -ms-expand   x000D        display  none  x000D        x000D   x000D       amp  -moz-focusring   x000D        color  transparent  x000D        text-shadow  none  x000D        x000D   x000D       amp  focus   x000D        background-image  linear-gradient 45deg   select-focus-color 50   transparent 50    x000D        linear-gradient 135deg  transparent 50    select-focus-color 50    linear-gradient to right   select-focus-color   select-focus-color   x000D        background-position  calc 100  - 15px  1em  calc 100  - 20px  1em  calc 100  - 2 5em  0 5em  x000D        background-size  5px 5px  5px 5px  1px 1 5em  x000D        background-repeat  no-repeat  x000D        border-color   select-focus-color  x000D        outline  0  x000D        x000D      x000D   x000D   x000D

User · Answer

You can also try this  Heres a Picture of it  And also run code snippet  CSS and then HTML   x000D   x000D              select-category               font-size  100               padding  10px              padding-right  180px              margin-left  30px              border-radius  1000000px              border  1px solid  707070              outline  none              -webkit-appearance  none              -moz-appearance  none              background  transparent              background-image  url  data image svg xml utf8  lt svg fill  black  height  34  viewBox  0 0 24 24  width  24  xmlns  http   www w3 org 2000 svg  gt  lt path d  M7 10l5 5 5-5z   gt  lt path d  M0 0h24v24H0z  fill  none   gt  lt  svg gt                 background-repeat  no-repeat              background-position-x  100               background-position-y  5px              margin-right  2rem            x000D                   lt select id  select-category  gt                       lt option gt Category lt  option gt                       lt option gt Category 2 lt  option gt                       lt option gt Category 3 lt  option gt                       lt option gt Category 4 lt  option gt                       lt option gt Category 5 lt  option gt                       lt option gt Category 6 lt  option gt                       lt option gt Category 7 lt  option gt                       lt option gt Category 8 lt  option gt                       lt option gt Category 9 lt  option gt                       lt option gt Category 10 lt  option gt                       lt option gt Category 11 lt  option gt                       lt option gt Category 12 lt  option gt                   lt  select gt  x000D   x000D   x000D

User · Answer

I wanna clear something that no one mention before I think   First get your svg image or icon There you will get some xml code like these  lt svg width  quot 24 quot  height  quot 25 quot  viewBox  quot 0 0 24 25 quot  fill  quot none quot  xmlns  quot http   www w3 org 2000 svg quot  gt   lt path d  quot M4 10 127L12 18 127L20 10 127H4Z quot  fill  quot  8E8E93 quot   gt   lt  svg gt   try to find it  And past it after this code data image svg xml utf8  Replace the fill color fill  quot  8E8E93 quot  to this fill  quot  238E8E93 quot  If you want to add hexadecmal color you should change   to  23  Here is the html code                 lt fieldset gt                   lt label for  quot editName quot  gt Country lt  label gt                       lt select class  quot ra-select quot  gt                         lt option value  quot bangladesh quot  selected gt Bangladesh lt  option gt                         lt option value  quot saudi arabia quot  gt Saudi Arabia lt  option gt                         lt option value  quot us quot  gt Uinited State Of America lt  option gt                         lt option value  quot india quot  gt India lt  option gt                       lt  select gt                   lt  fieldset gt   Here is the css code   ra-select      width  30      padding  10px        Replace Default styling  arrow        appearance  none     -webkit-appearance  none     -moz-appearance  none     background-image  url  data image svg xml utf8  lt svg width  quot 24 quot  height  quot 25 quot  viewBox  quot 0 0 24 25 quot  fill  quot none quot  xmlns  quot http   www w3 org 2000 svg quot  gt  lt path d  quot M4 10 127L12 18 127L20 10 127H4Z quot  fill  quot  238E8E93 quot   gt  lt  svg gt        background-repeat  no-repeat     background-position-y  50      background-position-x  98       ra-select focus   ra-select hover      outline  none     border  1px solid  bbb      ra-select option      background-color   fff

User · Answer

There are a few examples here It s based off this answer  but I added one to the list to make a design that is even more minimal select moreMinimal        background-color  inherit      display  inline-block      font  inherit      padding  0 2 2em 0 1em          margin  0            cursor  pointer       -webkit-box-sizing  border-box      -moz-box-sizing  border-box      box-sizing  border-box      -webkit-appearance  none      -moz-appearance  none       select moreMinimal       background-image        linear-gradient 45deg  transparent 50   gray 50          linear-gradient 135deg  gray 50   transparent 50        background-position        calc 100  - 20px          calc 100  - 15px       background-size        5px 5px        5px 5px      background-repeat  no-repeat         TODO  Probably shouldn t be focus  cause when you click it again it s still green select moreMinimal focus       background-image          linear-gradient 45deg  green 50   transparent 50            linear-gradient 135deg  transparent 50   green 50        background-position          calc 100  - 15px           calc 100  - 20px       background-size          5px 5px          5px 5px      background-repeat  no-repeat      border-color  green      outline  0

User · Answer

Have you tried something like this    styled-select select       -moz-appearance none     Firefox        -webkit-appearance none     Safari and Chrome        appearance none      Haven t tested  but should work   EDIT  It looks like Firefox doesn t support this feature up until version 35  read more here   There is a workaround here  take a look at jsfiddle on that post

User · Answer

Simple arrow and clean code select       -webkit-appearance  none      -moz-appearance  none      appearance  none      border  none      background  transparent url http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png  no-repeat 100  center      padding-right  25px

User · Answer

Working with just one class   select       width  268px      padding  5px      font-size  16px      line-height  1      border  0      border-radius  5px      height  34px      background  url http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png  no-repeat right  ddd      -webkit-appearance  none      background-position-x  244px      http   jsfiddle net qhCsJ 4120

User · Answer

Assume  selectDrop is the class present in your HTML  tag So  this much of code is enough to change default arrow icon    selectDrop        background  url    images icn-down-arrow-light png  no-repeat right  ddd    To change default icon with provided image         -webkit-appearance none    For hiding default pointer of drop-down on Chrome         -moz-appearance none    For hiding default pointer of drop-down on Mozilla         background-position-x  90     Adjust according to width of dropdown

User · Answer

You can use this  Its Tested code     select       background  url http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png  no-repeat right  important      appearance  none  important      background-size  25px 25px  important      background-position  99  50   important

User · Answer

Check this one  It s hacky  simple as that    Set -prefix-appearance to none to remove the styles Use text-indent to  push  the content a bit to the right Finally  set text-overflow to an empty string  Everything that extends beyond it s width will become    nothing  And that includes the arrow    Now you re free to style it any way you want      x000D   x000D   selectParent   x000D    width  80px  x000D    overflow  hidden  x000D    x000D   x000D   selectParent select   x000D    text-indent  1px  x000D    text-overflow      x000D    width  100px  x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D    padding  2px 2px 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 60px 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    View on JSFiddle

User · Answer

This would work well especially for those using Bootstrap  tested in latest browser versions    x000D   x000D  select   x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D       Some browsers will not display the caret when using calc  so we put the fallback first     x000D    background  url  http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png   white no-repeat 98 5   important      important used for overriding all other customisations    x000D    background  url  http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png   white no-repeat calc 100  - 10px   important     Better placement regardless of input width    x000D    x000D    For IE   x000D  select  -ms-expand   display  none    x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-6  gt  x000D         lt select class  form-control  gt  x000D          lt option gt Option 1 lt  option gt  x000D          lt option gt Option 2 lt  option gt  x000D          lt option gt Option 3 lt  option gt  x000D         lt  select gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have set up a select with a custom arrow similar to Julio s answer  however it doesn t have a set width and uses an svg as a background image   arrow drop down from material-ui icons   select     -webkit-appearance  none    -moz-appearance  none    background  transparent    background-image  url  data image svg xml utf8  lt svg fill  black  height  24  viewBox  0 0 24 24  width  24  xmlns  http   www w3 org 2000 svg  gt  lt path d  M7 10l5 5 5-5z   gt  lt path d  M0 0h24v24H0z  fill  none   gt  lt  svg gt       background-repeat  no-repeat    background-position-x  100     background-position-y  5px    border  1px solid  dfdfdf    border-radius  2px    margin-right  2rem    padding  1rem    padding-right  2rem        If you need it to also work in IE update the svg arrow to base64 and add the following   select  -ms-expand   display  none     background-image  url data image svg xml base64 PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8 PC9zdmc      To make it easier to size and space the arrow  use this svg   url  data image svg xml  lt svg width  24  height  24  xmlns  http   www w3 org 2000 svg  gt  lt path d  m0 6l12 12l12 -12l-24 0z   gt  lt path fill  none  d  m0 0l24 0l0 24l-24 0l0 -24z   gt  lt  svg gt       It doesn t have any spacing on the arrow s sides

User · Answer

Here is an elegant fix that uses a span to show the value   Layout is like this    lt div class  selectDiv  gt      lt span class  selectDefault  gt  lt  span gt      lt select name  txtCountry  class  selectBox  gt         lt option class  defualt-text  gt -- Select Country -- lt  option gt         lt option value  1  gt Abkhazia lt  option gt         lt option value  2  gt Afghanistan lt  option gt      lt  select gt   lt  div gt    JsFiddle

User · Answer

It s working in all browser   select       width  268px      padding  5px      font-size  16px      line-height  1      border  0      border-radius  5px      height  34px      background  url http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png  no-repeat right  ddd      appearance none      -moz-appearance none     Firefox        -webkit-appearance none     Safari and Chrome        background-position-x  244px

User · Answer

just do this   x000D   x000D  select        background-image  url data image svg xml base64 PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg     important      background-repeat  no-repeat  important      background-position-x  100   important      background-position-y  50   important           -webkit-appearance  none  important      -moz-appearance  none  important      -ms-appearance  none  important      -o-appearance  none  important      appearance  none  important    select  -ms-expand       display  none    x000D   x000D   x000D

User · Answer

Style the label with CSS and use pointer events     lt label gt   lt select gt      lt option value  0  gt Zero lt  option gt      lt option value  1  gt One lt  option gt   lt  select gt   lt  label gt    and the relative CSS is  label after       content   25BC       display inline-block      color  000      background-color  fff      margin-left -17px       remove the damn  after space        pointer-events none     let the click pass trough        I just used a down arrow here  but you can set a block with a background image  Here is a ugly fiddle sample   https   jsfiddle net 1rofzz89

[css] Select arrow style change

Examples related to css

Examples related to select