自定义select样式

在做项目中常常会使用到select下拉框，UI设计的下拉框一般比默认的好看，然而select的默认样式却修改不了，下面就介绍一下自定义的下拉框：

1.使用纯css自定义下拉框的样式

原理：将默认的样式清除，自定义样式，然后设置背景箭头图片

html代码：

<select>
        <option>请选择</option>
        <option>西瓜</option>
        <option>苹果</option>
        <option>香蕉</option>
</select>

css代码：

select{  
    width: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;
}  

效果图：

 

转载于:https://www.cnblogs.com/wanf/p/7363492.html