使用原生JavaScript实现部分表单元素-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_68054161/article/details/135768994

本文详细介绍了如何使用HTML、CSS和JavaScript实现下拉单选框和树形下拉菜单的效果，包括自定义样式和交互逻辑，以及通过DOM操作动态渲染选项。

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

1.实现下拉单选框

实现效果如下：
在这里插入图片描述
实现代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.test {
     
			width: 300px;
			height: 50px;
			margin: 20px;
		}

		/* 自定义组件 */
		.custom-select-container {
     
			width: 100%;
			height: 100%;
			font-size: inherit;
			position: relative;
		}

		.custom-select-container .custom-select-content {
     
			cursor: pointer;
			box-sizing: border-box;
			padding-left: 5%;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.custom-select-container .custom-select-pop-up-box {
     
			display: none;
			width: 100%;
			height: 100%;
		}

		.custom-select-container .custom-select-pop-up-box ul {
     
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}

		.custom-select-container .custom-select-pop-up-box li {
     
			cursor: pointer;
			list-style: none;
			box-sizing: border-box;
			padding-left: 5%;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			/* background-color: yellow; */
		}

		.custom-select-container .custom-select-pop-up-box li:hover {
     
			background-color: rgb(1, 122, 253);
		}

		.custom-select-container .custom-select-down-arrow {
     
			width: 10%;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%);
		}

		.custom-select-container .custom-select-border {
     
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			border: 0.05rem solid rgb(1, 122, 253);
			border-radius: 0.3rem;
			box-sizing: border-box;
			background-color: #fff;
		}
	</style>
</head>

<body>
	<div style="position: relative;" class="container">
		<div class="test">
			<div class="custom-select-container" style="z-index: 10;">
				<div class="custom-select-content">请选择地区</div>
				<div class="custom-select-pop-up-box"></div>
				<img src="./img/down-arrow.png" alt="箭头" class="custom-select-down-arrow" />
				<div class="custom-select-border"></div>
			</div>
		</div>
		<div class="test">
			<div class="custom-select-container" style="z-index: 9;">
				<div class="custom-select-content">请选择位置</div>