Change color and appearance of drop down arrow

Question

I want to change the default appearance of the arrow of a dropdown list so that looks the same across browsers  Is there a way to override the default look and feel of the drop down arrow using CSS or otherwise

User · Answer

It can be done by   select    background  url data image svg xml base64 PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM PHRpdGxlPmFycm93czwvdGl0bGU PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8 PC9zdmc   no-repeat 100  50        x000D   x000D  select  x000D    background  url data image svg xml base64 PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM PHRpdGxlPmFycm93czwvdGl0bGU PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8 PC9zdmc   no-repeat 100  50   x000D     x000D     x000D      -moz-appearance  none  x000D      -webkit-appearance  none  x000D      -webkit-border-radius  0px  x000D      appearance  none  x000D      outline-width  0  x000D       x000D      padding  10px 10px 10px 5px  x000D      display  block  x000D      width  10em  x000D      border  none  x000D      font-size  1rem  x000D       x000D      border-bottom  1px solid  757575  x000D      x000D   lt div class  styleSelect  gt  x000D     lt select class  units  gt  x000D       lt option value  Metres  gt Metres lt  option gt  x000D       lt option value  Feet  gt Feet lt  option gt  x000D       lt option value  Fathoms  gt Fathoms lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The  lt select gt  element is generated by the application and styling is not part of the CSS HTML spec   You would have to fake it with your own DIV and overlay it on top of the existing one  or build your own control emulating the same functionality

User · Answer

No  you can t do it by using an actual  lt select gt   but there are techniques that allow you to  replace  them with javascript solutions that look better   Here s a good article on the topic   lt select  Something New

User · Answer

Not easily done I am afraid  The problem is Css cannot replace the arrow in a select as this is rendered by the browser  But you can build a new control from div and input elements and Javascript to perform the same function as the select    Try looking at some of the autocomplete plugins for Jquery for example   Otherwise there is some info on the select element here   http   www devarticles com c a Web-Style-Sheets Taming-the-Select

User · Answer

We have used YUI  Chosen  and are currently using the jQuery Select2 plugin  https   select2 github io    It s pretty robust  the arrow is just the tip of the iceberg   As soon as stylized selects becomes a requirement  I agree with the others  go with a plugin  Don t kill yourself reinventing the wheel

User · Answer

No  cross-browser form custimization is very hard if not impossible to get it right for all browsers  If you really care about the appearance of those widgets you should use a javascript implementation   see http   www 456bereastreet com archive 200409 styling form controls  and http   developer yahoo com yui examples button btn example07 html

User · Answer

Unless you plan on creating your own drop down list  and not using a standard library drop down list   you are stuck  The DDL control s look is going to be based upon the system you are running and or the browser that is rendering the output

User · Answer

Try changing the color of your  border-top  attribute to white

User · Answer

You can acheive this with CSS but you are not techinically changing the arrow itself   In this example I am actually hiding the default arrow and displaying my own arrow instead    x000D   x000D   styleSelect select   x000D    background  transparent  x000D    width  168px  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    -moz-appearance  none  x000D    appearance  none  x000D    color   000  x000D    x000D   x000D   styleSelect   x000D    width  140px  x000D    height  34px  x000D    overflow  hidden  x000D    background  url  images downArrow png   no-repeat right  fff  x000D    border  2px solid  000  x000D    x000D   lt div class  styleSelect  gt  x000D     lt select class  units  gt  x000D       lt option value  Metres  gt Metres lt  option gt  x000D       lt option value  Feet  gt Feet lt  option gt  x000D       lt option value  Fathoms  gt Fathoms lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Change color and appearance of drop down arrow

Examples related to css

Examples related to drop-down-menu