CSS for the down arrow on a select element

Question

Is it possible to stylize the down arrow on a drop down select element  i e     lt select gt  lt option gt -- gt  lt  option gt  lt  select gt    I suspect the answer is no because of the way IE handles that particular element  If there isn t a way  does anyone know of a  fake  drop down box using javaScript that would mimic that behavior but give me the ability to customize

User · Accepted Answer

Maybe you can use jQuery selectbox replacement  It s a jQuery plugin

User · Answer

I don t know if it is stylable with CSS  probably not in IE   but please  do not use a  fake  drop-down box using javascript  because the usability of these things usually is horrible  Among other things  keyboard navigation is usually absent

User · Answer

No  the down arrow is a browser element  It s built in  and different  in every browser  You can  however  replace the select box with a custom drop down box using javascript   Jan Hancic mentioned a jQuery plugin to do just that

User · Answer

You can achieve this with just CSS and your down arrow as an image positioned absolute with a  pointer-events  none   see my example below    lt select gt     lt option value  1  gt 1 Person lt  option gt     lt option value  2  gt 2 People lt  option gt   lt  select gt   lt img class  passthrough  src  downarrow png    gt    passthrough       pointer-events  none      position  absolute      right  0

User · Answer

I don t know if it is stylable with CSS  probably not in IE   but please  do not use a  fake  drop-down box using javascript  because the usability of these things usually is horrible  Among other things  keyboard navigation is usually absent

User · Answer

The drop-down is platform-level element  you can t apply CSS to it   You can overlay an image on top of it using CSS  and call the click event in the element beneath

User · Answer

You can achieve this with just CSS and your down arrow as an image positioned absolute with a  pointer-events  none   see my example below    lt select gt     lt option value  1  gt 1 Person lt  option gt     lt option value  2  gt 2 People lt  option gt   lt  select gt   lt img class  passthrough  src  downarrow png    gt    passthrough       pointer-events  none      position  absolute      right  0

User · Answer

No  the down arrow is a browser element  It s built in  and different  in every browser  You can  however  replace the select box with a custom drop down box using javascript   Jan Hancic mentioned a jQuery plugin to do just that

User · Answer

You would need to create your own dropdown using hidden divs and a hidden input element to record which option was  selected   My guess is that  Jan Hancic s link he posted is probably what you re looking for

User · Answer

You would need to create your own dropdown using hidden divs and a hidden input element to record which option was  selected   My guess is that  Jan Hancic s link he posted is probably what you re looking for

User · Answer

I don t know if it is stylable with CSS  probably not in IE   but please  do not use a  fake  drop-down box using javascript  because the usability of these things usually is horrible  Among other things  keyboard navigation is usually absent

User · Answer

You would need to create your own dropdown using hidden divs and a hidden input element to record which option was  selected   My guess is that  Jan Hancic s link he posted is probably what you re looking for

User · Answer

Try this      lt div style  position relative left 0px top 0px          onMouseOver document getElementById  visible   style visibility  visible           id  hidden  gt 10     lt select style  position absolute left 0px top 0px cursor pointer visibility hidden           onMouseOut document getElementById  visible   style visibility  hidden          onChange  this form submit             id  visible  multiple size  3  gt        lt option selected value 10 gt 10 lt  option gt      lt option value 20 gt 20 lt  option gt      lt option value 50 gt 50 lt  option gt      lt  select gt      lt  div gt

User · Answer

http   jsfiddle net u3cybk2q 2  check on windows  iOS and Android  iexplorer patch    x000D   x000D   styled-select select   x000D     background  transparent  x000D     width  240px  x000D     padding  5px  x000D     font-size  16px  x000D     line-height  1  x000D     border  0  x000D     border-radius  0  x000D     height  34px  x000D     -webkit-appearance  none  x000D    x000D   styled-select   x000D     width  240px  x000D     height  34px  x000D     overflow  visible  x000D     background  url http   nightly enyojs com latest lib moonstone dist moonstone images caret-black-small-down-icon png  no-repeat right  FFF  x000D     border  1px solid  ccc  x000D    x000D   styled-select select  -ms-expand   x000D      display  none    patch iexplorer   x000D    x000D     lt div class  styled-select  gt  x000D          lt select gt  x000D             lt option gt Here is the first option lt  option gt  x000D             lt option gt The second option lt  option gt  x000D          lt  select gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

I don t know if it is stylable with CSS  probably not in IE   but please  do not use a  fake  drop-down box using javascript  because the usability of these things usually is horrible  Among other things  keyboard navigation is usually absent

User · Answer

No  the down arrow is a browser element  It s built in  and different  in every browser  You can  however  replace the select box with a custom drop down box using javascript   Jan Hancic mentioned a jQuery plugin to do just that

User · Answer

You can t style combos very well using CSS   The guys at FogBugz made a pretty good custom combo using JavaScript  so it is possible  it just takes a lot of work to get it right     Better to stick with the standard one for version 1  then see if it s worth updating it once your app is in the wild

User · Answer

You can t style combos very well using CSS   The guys at FogBugz made a pretty good custom combo using JavaScript  so it is possible  it just takes a lot of work to get it right     Better to stick with the standard one for version 1  then see if it s worth updating it once your app is in the wild

User · Answer

You can t style combos very well using CSS   The guys at FogBugz made a pretty good custom combo using JavaScript  so it is possible  it just takes a lot of work to get it right     Better to stick with the standard one for version 1  then see if it s worth updating it once your app is in the wild

User · Answer

Try this      lt div style  position relative left 0px top 0px          onMouseOver document getElementById  visible   style visibility  visible           id  hidden  gt 10     lt select style  position absolute left 0px top 0px cursor pointer visibility hidden           onMouseOut document getElementById  visible   style visibility  hidden          onChange  this form submit             id  visible  multiple size  3  gt        lt option selected value 10 gt 10 lt  option gt      lt option value 20 gt 20 lt  option gt      lt option value 50 gt 50 lt  option gt      lt  select gt      lt  div gt

User · Answer

The drop-down is platform-level element  you can t apply CSS to it   You can overlay an image on top of it using CSS  and call the click event in the element beneath

User · Answer

You would need to create your own dropdown using hidden divs and a hidden input element to record which option was  selected   My guess is that  Jan Hancic s link he posted is probably what you re looking for

User · Answer

There s a cool CSS-only solution to styling dropdowns here  http   bavotasan com 2011 style-select-box-using-only-css   Basically  wrap the select in a container div  style the select to be 18px wider than the container with a transparent background  give overflow hidden to the container  to chop off the browser-generated arrow   and add your background image with stylized arrow to the container    Doesn t work in IE7  or 6   but seriously  I say if you re using IE7 you deserve a less-pretty dropdown experience

User · Answer

You can t style combos very well using CSS   The guys at FogBugz made a pretty good custom combo using JavaScript  so it is possible  it just takes a lot of work to get it right     Better to stick with the standard one for version 1  then see if it s worth updating it once your app is in the wild

User · Answer

http   jsfiddle net u3cybk2q 2  check on windows  iOS and Android  iexplorer patch    x000D   x000D   styled-select select   x000D     background  transparent  x000D     width  240px  x000D     padding  5px  x000D     font-size  16px  x000D     line-height  1  x000D     border  0  x000D     border-radius  0  x000D     height  34px  x000D     -webkit-appearance  none  x000D    x000D   styled-select   x000D     width  240px  x000D     height  34px  x000D     overflow  visible  x000D     background  url http   nightly enyojs com latest lib moonstone dist moonstone images caret-black-small-down-icon png  no-repeat right  FFF  x000D     border  1px solid  ccc  x000D    x000D   styled-select select  -ms-expand   x000D      display  none    patch iexplorer   x000D    x000D     lt div class  styled-select  gt  x000D          lt select gt  x000D             lt option gt Here is the first option lt  option gt  x000D             lt option gt The second option lt  option gt  x000D          lt  select gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

The drop-down is platform-level element  you can t apply CSS to it   You can overlay an image on top of it using CSS  and call the click event in the element beneath

User · Answer

There s a cool CSS-only solution to styling dropdowns here  http   bavotasan com 2011 style-select-box-using-only-css   Basically  wrap the select in a container div  style the select to be 18px wider than the container with a transparent background  give overflow hidden to the container  to chop off the browser-generated arrow   and add your background image with stylized arrow to the container    Doesn t work in IE7  or 6   but seriously  I say if you re using IE7 you deserve a less-pretty dropdown experience

User · Answer

No  the down arrow is a browser element  It s built in  and different  in every browser  You can  however  replace the select box with a custom drop down box using javascript   Jan Hancic mentioned a jQuery plugin to do just that

User · Answer

The drop-down is platform-level element  you can t apply CSS to it   You can overlay an image on top of it using CSS  and call the click event in the element beneath

User · Answer

This will change inputs  select etc to the old style grey not sure if you can manipulate after that  In  lt head gt  put    lt meta http-equiv  MSThemeCompatible  content  NO  gt

User · Answer

This will change inputs  select etc to the old style grey not sure if you can manipulate after that  In  lt head gt  put    lt meta http-equiv  MSThemeCompatible  content  NO  gt

[jquery] CSS for the "down arrow" on a <select> element?

Examples related to jquery

Examples related to html

Examples related to css