css修改下拉列表select默认样式的实例

select的一些默认样式我们很难修改，比如图标的替换。接下来就说说如何修改这些默认样式，希望本文能帮助到大家。

给select添加父元素p目的是为了，用p的样式覆盖住select样式。

css代码：

 p{
 //用p的样式代替select的样式
 width: 200px;
 height: 40px;
 border-radius: 5px;
 //盒子阴影修饰作用,自己随意
 box-shadow: 0 0 5px #ccc;
 position: relative;
 }
 select{
 //清除select的边框样式
 border: none;
 //清除select聚焦时候的边框颜色
 outline: none;
 //将select的宽高等于p的宽高
 width: 100%;
 height: 40px;
 line-height: 40px;
 //隐藏select的下拉图标
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 //通过padding-left的值让文字居中
 padding-left: 60px;
 }
 //使用伪类给select添加自己想用的图标
 p:after{
 content: "";
 width: 14px;
 height: 8px;
 background: url(img/xiala.png) no-repeat center;
 //通过定位将图标放在合适的位置
 position: absolute;
 right: 20px;
 top: 45%;
 //给自定义的图标实现点击下来功能
 pointer-events: none;
 }

select的一些默认样式我们很难修改，比如图标的替换。接下来就说说如何修改这些默认样式： html代码：