IE9中，去掉select下拉列表的默认样式

最新推荐文章于 2021-08-03 14:52:58 发布

北方爷们儿

最新推荐文章于 2021-08-03 14:52:58 发布

阅读量592

点赞数 1

分类专栏： javascript 文章标签： css html 前端

本文链接：https://blog.csdn.net/hxm2017jy/article/details/109471530

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

【IE兼容性】IE9中，去掉select下拉列表的默认样式

废话不多说，直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>IE9中去掉select的默认样式--尝试版</title>
</head>
<style>
	select{
		border: solid 1px #000;
		width:100px;

		/*很关键：将默认的select选择框样式清除*/
		appearance:none;
		-moz-appearance:none;
		-webkit-appearance:none;
		/*在选择框的最右侧中间显示小箭头图片*/
		background: url(./img/k1.png) no-repeat scroll right center transparent;

		/*为下拉小箭头留出一点位置，避免被文字覆盖*/
		padding-right: 14px;
	}
	/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
	select::-ms-expand { display: none; }

</style>
<body>
		<select name="" id="">
			<option value="">周一</option>
			<option value="">周二</option>
			<option value="">周三</option>
			<option value="">周四</option>
			<option value="">周五</option>
		</select>
</body>
</html>

结果显示成如下图在这里插入图片描述
因此，此方案根本无法解决问题，IE8、IE9并不支持 appearance:none 属性，这时可以利用外层的div父容器，利用父容器来覆盖小箭头，然后为select 添加一个向右的偏移或者宽度大于父容器，设置父容器的css属性为超出部分不可见，即可覆盖小箭头，然后为父容器添加背景图片即可，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>IE9中去掉select的默认样式--终极版</title>
</head>
<style>
	.select_div{
		width: 100px;
		height: 30px;
		border: 1px solid red;
		background: url(./img/k1.png) no-repeat no-repeat scroll right center;
	    overflow: hidden;
	}
	select{
		 background: transparent;
	    border: none;
	    padding-left: 10px;
	    width: 120px;
	    height: 100%;
	}
</style>
<body>
	<div class="select_div">
		<select name="" id="">
			<option value="">周一</option>
			<option value="">周二</option>
			<option value="">周三</option>
			<option value="">周四</option>
			<option value="">周五</option>
		</select>
	</div>
</body>
</html>

浏览器中的效果：
在这里插入图片描述
那么，至此，就可以实现想要的效果啦！

北方爷们儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IE9中，去掉select下拉列表的默认样式

IE9中，去掉select下拉列表的默认样式废话不多说，直接贴代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IE9中去掉select的默认样式--尝试版</title></head><style> select{ border: solid 1px #000; width:100px; /
复制链接

扫一扫

专栏目录