select下拉框在IE和火狐下样式问题

最新推荐文章于 2021-06-03 13:02:53 发布

沈荣荣

最新推荐文章于 2021-06-03 13:02:53 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：下拉框浏览器兼容文章标签：下拉框浏览器兼容

本文链接：https://blog.youkuaiyun.com/u010251897/article/details/52806970

下拉框浏览器兼容专栏收录该内容

1 篇文章

订阅专栏

本文通过示例代码展示了如何使用自定义样式和JavaScript来解决IE和Firefox浏览器中select下拉框样式不一致的问题。通过隐藏原生的select元素，创建一个具有相同行为的替换元素，实现了在不同浏览器间保持一致的视觉效果。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>custom js select</title>
	<style type="text/css">
		* { margin:0;padding:0;border:0 none;font-family:arial,helvetica,sans-serif;}
		body { padding:10px;}
		#current,#options { border:1px solid #999;}
		#replace {cursor:default;overflow:visible;position:relative;}
		#current { background:url("http://lab.aspektas.com/select/dropdown.png") right center no-repeat;margin-bottom:0;}
		#current,#replace,#options li { width:300px;}
		#options { border-top:0 none; display:none;list-style-type:none;margin-top:0;position:absolute;width:310px;}
		#current,#options li {padding:5px;}
		#current,#options,#options li {background-color:#FFF;}
	</style>
</head>
<body>
	<form>
		<select id="select">
			<option>请选择一项</option>
			<option value="1">选项一</option>
			<option value="2">选项二</option>
			<option value="3">选项三</option>
		</select>
		<div id="replace">
			<div id="current">请选择一项</div>
			<ul id="options">
				<li rel="1">选项一</li>
				<li rel="2">选项二</li>
				<li rel="3">选项三</li>
			</ul>
		</div>
	</form>
	<script type="text/javascript">
		function getEle(id){
			return document.getElementById(id);
		}
		window.onload = function(){
			var i;
			getEle("select").style.display = "none";
			getEle("replace").style.display = "block";
			lis = getEle("options").getElementsByTagName("li");
				for(i=0,len = lis.length;i<len;i++){
					lis[i].onclick = function(){
						getEle("select").value = this.getAttribute("rel");
						getEle("options").style.display = "none";
						getEle("current").innerHTML = this.innerHTML;
					}
					lis[i].onmouseover = function(){this.style.backgroundColor = "#DEDEDE";}
					lis[i].onmouseout = function(){this.style.backgroundColor = "transparent";}
					
				}
				getEle("replace").onmouseover = function(){
					getEle("options").style.display = "block";
				}
				getEle("replace").onmouseout = function(){
					getEle("options").style.display = "none";
				}
		}
	</script>
</body>
</html>