CODEWITHSUNDEEP
htmlcss
user7090116
user7090116

Reputation:

How to change down-arrow on select tag

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?

Upvotes: 5

Views: 23913

Answers (3)

Kerem
Kerem

Reputation: 11576

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 */

Upvotes: 3

Jishnu V S
Jishnu V S

Reputation: 8409

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>

Upvotes: 18

Charles Bourr&#233;e
Charles Bourr&#233;e

Reputation: 151

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?

Upvotes: 0

Related Questions