在做项目中常常会使用到select下拉框,UI设计的下拉框一般比默认的好看,然而select的默认样式却修改不了,下面就介绍一下自定义的下拉框:
1.使用纯css自定义下拉框的样式
原理:将默认的样式清除,自定义样式,然后设置背景箭头图片
html代码:
<select> <option>请选择</option> <option>西瓜</option> <option>苹果</option> <option>香蕉</option> </select>
css代码:
select{ 200px; height:30px; appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../images/sel-bg.png") no-repeat 170px center; background-size:10%; font-size:16px; font-family:Microsoft YaHei; color:#666; outline:none; }
效果图: