select下拉箭头样式改变问题

最新推荐文章于 2023-10-23 18:56:56 发布

原创最新推荐文章于 2023-10-23 18:56:56 发布 · 4.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS要点专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种通过CSS和HTML实现自定义Select下拉箭头样式的方法。主要步骤包括：在外层使用SPAN元素并设置背景为自定义箭头图片；调整SELECT元素宽度使箭头远离文字；在SELECT外层再套一层SPAN并设置overflow属性以隐藏原生下拉框。

*****关于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>