*****关于select下拉箭头样式改变问题*****
1.在SELECT最外层套一个SPAN,加背景颜色,用 background: url("../images/select.png") no-repeat 0.55rem 0.28rem; 把小箭头位置设在SPAN靠右边;
2.把SELECT的WIDTH设置的稍微长些,让小箭头跑远一点;
3.在SELCT和最外层的中间再加一个SPAN,WIDTH比SELECT的WIDTH要小,设置overfloat:hidden;就可以把SELECT的下拉框隐藏掉了。
这样一来,就剩下背景的下拉箭头图片了
话不多说,上代码
//css header .selectbox{ background: url("../images/select.png") no-repeat 0.55rem 0.28rem;margin: 0.1rem 0 0 0.18rem;background-size: 0.1rem 0.11rem} header select.language { font-size: 0.2rem!important; height: 0.67rem; width: 1.2rem; color: #171c61; display: block; } header #sleHid { display: block; width: 0.9rem; overflow: hidden; }
//html <span class="selectbox"> <span id="sleHid"> <select class="language" > <option value="volvo">简体</option> <option value="saab">繁体</option> </select> </span> </span>