如何更改选择标记上的向下箭头

Question

如何更改选择标记的向下箭头？例:

它现在看起来如何:

我希望如何:

我怎样才能做到这一点？

Answer 1

您可以使用纯css尝试此操作,首先需要删除select带有appearance:none属性的标记的默认行为.

浏览器指定

• 外观:无;

• -webkit-外观:无; /* chrome and safari */

• -moz-外观:无; /* Mozilla */

• -MS-外观:无; /* Internet explorer */

  然后你可以设置 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>