如何用css样式修改select下拉标签的默认箭头样式

当需求是不让用ui框架,而要手动修改一个select下拉列表的样式时…

像这样把图一改成图二:
(图一):
图一
(图二):
如何用css样式修改select下拉标签的默认箭头样式_第1张图片

代码如下:
select {
    /* 鼠标移上,变小手 */
	 cursor: pointer;
     padding: 0 10px;
     /* 清除默认的箭头样式 */
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     /* 右侧添加箭头的背景图  自行调整位置 */
     background: url('img/xia.png') 210px center no-repeat #fff;
}

其他样式如边框,宽高等,可自行设置。

你可能感兴趣的:(Css3常用样式)