How to change down arrow on select tag

Question

How to change down arrow on select tag? Example:

What it looks like now:

How i want:

How can i achieve this?

Answer 1

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

specified browser

• appearance: no;

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

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

• -MS-appearance: no; /* Internet explorer */

  then you can install 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>

Run codeHide result

Answer 2

I think it’s better to leave a choice in the browser, how to show the list. Why make the user change their habits?

Else <select> CSS JavaScript?