5

How to change down-arrow on select tag? Example:

How it looks now:

enter image description here

How I want it to be:

enter image description here

How can I achieve this?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
  • It isn't, not straight out of the box, at least. You'll need to either use javascript to change the element to something you can style consistently across browsers, or use a replacement-element for the button itself. – junkfoodjunkie Jan 04 '17 at 10:12
  • Look at this question: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – emtei Jan 04 '17 at 10:12

3 Answers3

18

You can try this with pure css , first you need to remove the default behavior of the select tag with appearance:none property.

browser specified

  • appearance:none;

  • -webkit-appearance:none; /* chrome and safari */

  • -moz-appearance:none; /* Mozilla */

  • -ms-appearance:none; /* Internet explorer */

    then you can set background-image

select {
 width:100px;
 float:left;
 appearance:none;
 -webkit-appearance:none;
 -moz-appearance:none;
 -ms-appearance:none;
 border:2px solid #000;
 background:url('http://www.free-icons-download.net/images/small-down-arrow-icon-15593.png');
 background-repeat:no-repeat;
 background-size:16px 17px;
 background-position:right 0px;
}
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
  • 1
    Well, that seems to do what I wanted. Thanks a lot, I will mark this as helpful. :D –  Jan 04 '17 at 10:16
3

Here is another simple approach with SVG, without an external image:

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 24px; 
  background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat #fff; } /* change or remove #fff color if not needed */
Kerem
  • 11,377
  • 5
  • 59
  • 58
0

I think it's better to leave the choice to the browser how show a list. Why force the user to change his habits ?

Else How to style a <select> dropdown with CSS only without JavaScript?

Community
  • 1
  • 1
Charles Bourrée
  • 151
  • 5