当需求是不让用ui框架,而要手动修改一个select下拉列表的样式时…
像这样把图一改成图二:
(图一):
(图二):
代码如下:
select {
/* 鼠标移上,变小手 */
cursor: pointer;
padding: 0 10px;
/* 清除默认的箭头样式 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* 右侧添加箭头的背景图 自行调整位置 */
background: url('img/xia.png') 210px center no-repeat #fff;
}
其他样式如边框,宽高等,可自行设置。