select自定义箭头样式

select自定义箭头样式？兼容性？

---

html代码如下:

<div class="selectwrap">    <div>类别</div>    <select id="worktype">        <option>最新流行音乐</option>        <option>经典金属音乐</option>        <option>潮流休闲音乐</option>    </select></div>

css代码如下:

.selectwrap{    width:100%;    line-height: 28px;    box-sizing: border-box;    border: #626262 1px solid;    color: #333;}.selectwrap div{    float: left;    height: 100%;    text-align: center;    background: url(../images/select_bgline.png) no-repeat right center;}    .selectwrap select{        width:290px;        height: 100%;        line-height: 28px;        border-style: none;        outline: none;        font-family: "微软雅黑";        font-size: 15px;        font-weight: normal;        box-sizing: border-box;        /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/        border: solid 1px #000;        /*很关键：将默认的select选择框样式清除*/        appearance:none;        -moz-appearance:none;        -webkit-appearance:none;        /*在选择框的最右侧中间显示小箭头图片*/        background: url(../images/arrow.png) no-repeat scroll 273px center transparent;        /*为下拉小箭头留出一点位置，避免被文字覆盖*/        padding-right: 18px;        }

---

更改之后的select箭头效果如下：

兼容性处理参考代码。