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

Question

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

现在的样子：

我希望如何：

我怎样才能做到这一点？

Answer 1

您可以使用纯css尝试此操作，首先您需要删除select标记的appearance:none标记的默认行为。

浏览器指定

• 外观：无;

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

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

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

  然后您可以设置background-image

＆＃13;

＆＃13;

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;
}

＆＃13;

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是使用SVG的另一种简单方法，没有外部图像：

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

Answer 3

我认为最好将选择留给浏览器如何显示列表。 为什么强迫用户改变他的习惯？

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