select自定义箭头样式

最新推荐文章于 2024-07-05 14:03:54 发布

草巾冒小子

最新推荐文章于 2024-07-05 14:03:54 发布

阅读量1.4w

点赞数 1

分类专栏： HTML 5 CSS 3 文章标签： select html

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/76839401

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

HTML 5

33 篇文章 3 订阅

订阅专栏

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;
		}