DIV遮盖select元素(模拟disabled)

最新推荐文章于 2024-06-14 20:31:44 发布

zhangzikui

最新推荐文章于 2024-06-14 20:31:44 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： div border iframe 浏览器 table ie

本文链接：https://blog.youkuaiyun.com/zhangzikui/article/details/7266290

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种通过CSS样式实现的遮盖select元素的方法，包括如何使用div定位和透明度来达到效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head> 
		<title>遮盖select的解决方</title> 
		<style type="text/css"> 
			#popup{
				border:none;
				position:relative;
				width:60%;
				height:23px;
				top:-22px; /*使得div向上移动，遮住select*/
				margin-bottom:-22px;/*消除div向上移动后，原位置所占用的空间*/
				background-color:#fff; /*对于IE，不使用iframe进行遮盖时，必须设置此属性，否则不能遮盖select*/
				filter:alpha(opacity=45);
				opacity:0.4;
				display:block;
				z-index:100;/*可选*/
				}
		</style> 
	</head> 
	<body> 
		
		<table border="1">
			<tr>
				<td>asdf</td><td>asdf</td>
			</tr>
			
			<tr>
				<td>asdf</td><td>asdf</td>
			</tr>
			
			<tr>
				<td>asdf</td>
				<td>
						<select name="ddTest"> 
							<option>…</option> 
							<option selected="selected">数字电路</option> 
						</select> 
						<div id="popup">
							<!--IE6下，可在此处放置一个iframe，以遮盖select元素，其他浏览器可以不要-->
							<iframe frameborder="0" scrolling="no" style="border:none;position:relative;height:23px;width:100%;display:block;z-index:-1;"></iframe>	
						</div> 
				</td>
			</tr>
	  </table>
		
	</body>
</html>