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箭头效果如下:
兼容性处理参考代码。
以上就是关于“select自定义箭头样式”的全部内容。