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

<style>
        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;
        }
    </style>

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