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

html 代码：

<div>

    <select name="">

        <option value="芝士">芝士</option>

        <option value="奶油">奶油</option>

    </select>

</div>

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

//清除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;

}

select:focus { outline:none }  //去选择后默认黑色边框