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

概述如何更改选择标记的向下箭头？例： 它现在看起来如何： 我希望如何： 我怎样才能做到这一点？ 您可以使用纯css尝试此 *** 作,首先需要使用appearance：none属性删除select标记的默认行为. 浏览器指定 >外观：无; > -webkit-appearance：none; / * chrome和safari * / > -moz-appearance：none; / * Mozilla * 如何更改选择标记的向下箭头？例：

它现在看起来如何：

我希望如何：

我怎样才能做到这一点？

解决方法 您可以使用纯CSS尝试此 *** 作,首先需要使用appearance：none属性删除select标记的默认行为.

浏览器指定

>外观：无;
> -webkit-appearance：none; / * Chrome和safari * /
> -moz-appearance：none; / * Mozilla * /
> -ms-appearance：none; /* IE浏览器 */

然后你可以设置背景图像

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>

@H_502_40@ 总结

以上是内存溢出为你收集整理的html – 如何更改选择标记上的向下箭头全部内容，希望文章能够帮你解决html – 如何更改选择标记上的向下箭头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。