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

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

html代码：

<div> ???<select name=""> ???????<option value="芝士">芝士</option> ???????<option value="奶油">奶油</option> ???</select></div>

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

css代码：

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