漂亮select框

最新推荐文章于 2024-05-24 13:19:01 发布

深呼吸000

最新推荐文章于 2024-05-24 13:19:01 发布

阅读量1.6k

点赞数

分类专栏：【javaEE】

本文链接：https://blog.csdn.net/gaobing1106/article/details/38068829

版权

【javaEE】专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<style type="text/css">
		.selectPage{ 
			width:107px;
			height:21px;
			background:none;
			border:none;
			padding-top:3px;
			background-color:Transparent;
			color:gray;
			position:absolute;
			z-index:-1;
		}
		#sleHid{ 
			display:block; 
			width:109px; 
			height:21px; 
			overflow:hidden;
			position:relative; /*解决IE6、7兼容问题*/
			top:2px;  /*解决IE6、7兼容问题*/
			left:2px;  /*解决IE6、7兼容问题*/
			z-index:80;
		}     
		#sleBG{
			width:111px; 
			height:24px;
			background:url(每页显示条数.png) no-repeat;
			display:inline-block;
			height:24px;
			position:relative;
			z-index:90;
		} 
		#seleDIV{
			margin-top:-16px;
			margin-left:93px;
			position:absolute;
			z-index:100;
		}
	</style>
	
	</head>

	<body>
	
		<span id="sleBG">
		   <span id="sleHid">
			 <select name="select" size="1" id="select" class="selectPage">
			   <option  value="张三">     张三</option>
			   <option  value="李四">     李四</option>
			 </select>
		   </span>
		   <div id="seleDIV"><img src="selsan.png"/></div>
		</span>
	</body>

</html>

<span style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;">解释一下：</span><br class="edui-filter-align-left" style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;" /><span style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;">原理是在select外层加入2个span，首先设置第一个span，其width大于select的width，在这个span的背景加入我们想要的下拉箭头样式，然后再加第二个span，其width小于select的width，关键设置好它的overflow的宽度，隐藏select的下拉箭头。</span><br class="edui-filter-align-left" style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;" /><span style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;">优点是设置简单，缺点是若无javascript模拟鼠标点击则下拉箭头仅能起到装饰作用。</span><br class="edui-filter-align-left" style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;" /><span style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;">想要求漂亮而且代码的少的话，可以使用本方法。</span><br class="edui-filter-align-left" style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;" /><span style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;">注释：</span><br class="edui-filter-align-left" style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;" /><span style="color: rgb(51, 51, 51); font-family: verdana, 微软雅黑, sans-serif; font-size: 14px; line-height: 25.200000762939453px;">当我们使用overflow:hidden;后，你会发现，这个属性只在FF和IE8下起作用，那么在IE6、7下怎么办？很简单，加一个position:relative;即可。然后根据你需要的位置，加一个top、left，问题完美解决。</span>

深呼吸000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
漂亮select框

.selectPage{ width:107px; height:21px; background:none; border:none; padding-top:3px; background-color:Transparent; color:gray; position:absolute; z-index:-1; } #sleHid
复制链接

扫一扫