自定义select的样式

最近在项目上用原生的html css js(jquery)进行页面的开发
有的需求要用到选择框
但是在项目上用原生的select 那肯定是不行的，样式太难看
下面我给出我对select样式自定义的实现
html 代码

 <div class="getRole">
        <select name="role" id="">
            <option value="">请选择角色</option>
            <option value="请选择">选择</option>
        </select>
    </div>

对应的css 代码

		select:focus {
            outline: 0px;
        }

        select {
            border: none;
            height: 20px;
            /*很关键：将默认的select选择框样式清除*/
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            width: 95%;
            padding-left: 10px;
            /*在选择框的最右侧中间显示小箭头图片*/
            background: url("../../image/setting-img/down.png") no-repeat scroll right center transparent;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            padding-right: 14px;
        }

        select::-ms-expand {
            display: none;
        }

        .getRole {
            margin: 20px 0;
            /* margin-left: -39px; */
            width: 260px;
            height: 24px;
            border-radius: 3px;
            border: 1px solid #ccc;
            border-color: rgba(153, 129, 129, 0.5);

        }

选择下拉框的显示