模拟select下拉框（简单粗暴又有效）

最新推荐文章于 2025-06-19 03:39:14 发布

蜗牛2号

最新推荐文章于 2025-06-19 03:39:14 发布

阅读量3.5w

点赞数 6

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_35813653/article/details/80562203

前端技术杂述专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript自定义下拉框的方法。通过input-ul-li结构代替传统的select标签，实现了更美观且可定制的下拉菜单。文章提供了完整的代码示例，包括如何设置样式、响应鼠标点击事件及模拟选项窗口。

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

基本的select标签下拉框，采用浏览器内置样式，不能更改，极其影响用户体验。故一般前端采用input-ul-li方式模拟select下拉框。

废话不多说，上代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>

	<body>

		<input readonly="readonly" style="width: 100px;" value="请选择姓名" />
		
		<!--overflow-y:为div层（模拟选项窗）设置垂直滚动-->
		<div style="height:100px;overflow-y:auto;border-style:groove;display: none;">
			<ul style="list-style: none;margin: 0;padding: 0;text-align: center;">
				<li>孙逸</li>
				<li>张三</li>
				<li>李四</li>
				<li>王五</li>
				<li>二麻子</li>
				<li>小六子</li>
				<li>九儿</li>
				<li>巴迪</li>
				<li>九个</li>
				<li>四爷</li>
			</ul>
		</div>
		<script type="text/javascript">
			//让选项窗与输入窗等宽
			$(function() {
				$("div").css({
					'width': $("input").css('width')
				})
			})
			
			$("input").click(function() {
			//点击输入框打开选项窗，若已打开则关闭
				if($("div").css('display') == 'none') {
					$("div").show();
					$('li:contains(' + $(this).val() + ')').css('background-color', 'orange')
				} else {
					$("div").hide();
				}
			})
			$("li").click(function() {
				//点击选择时为输入框赋值。并关闭选项窗
				$("input").val($(this).text())
				$("div").hide();
			})
			//为选项设置颜色
			$("li").mouseover(function() {
				$('li').css('background-color', 'white')
				$(this).css({
					'cursor': 'pointer',
					'background-color': 'orange'
				});
			})
		</script>
	</body>

</html>

效果展示如下(聚焦选项是指针会变小手指)：