H5中修改select的默认样式

<div class="select_wrap">
    <select>
        <option value ="室内布线">室内布线</option>
        <option value ="隐形光纤">隐形光纤</option>
        <option value="其他终端">其他终端</option>
     </select> 
</div>

样式如下：

.select_wrap{
    /* 用div的样式代替select的样式 */
    display: inline-block;
    height: 1rem;
    position: relative;
}
.select_wrap select{
    /* //清除select的边框样式 */
    border: none;
    /* //清除select聚焦时候的边框颜色 */
    outline: none;
    /* //将select的宽高等于div的宽高 */
    display: inline-block;
    height: 1rem;
    line-height: 1rem;
    /* //隐藏select的下拉图标 */
    appearance:none;
    -moz-appearance:none; 
    -webkit-appearance:none;  
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    font-size: .4rem;
}
/* //使用伪类给select添加自己想用的图标 */
.select_wrap:after{
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    background: url(../images/down.png) no-repeat center;
    background-size: contain;
    font-size: 0;
    /* //通过定位将图标放在合适的位置 */
    position: absolute;
    right: 0;
    top: 40%;
    /* //给自定义的图标实现点击下来功能 */
    pointer-events: none;
}