如何在选择标签上更改向下箭头 [英] How to change down-arrow on select tag

问题描述

如何更改选择标签上的向下箭头？示例：

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

现在的样子：

我想要的样子：

如何实现？

推荐答案

您可以尝试使用pure css，首先需要使用 appearance：none 属性删除 select 标记的默认行为。

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

指定浏览器

• 外观：无；

• appearance:none;

-webkit-appearance：none; / * chrome和safari * /

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

-moz-appearance：none; / * Mozilla * /

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

-ms-appearance：none; / * Internet Explorer * /

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

然后您可以设置背景图像

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>

这篇关于如何在选择标签上更改向下箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！