下拉列表的美化

最新推荐文章于 2024-09-26 13:58:48 发布

BangD

最新推荐文章于 2024-09-26 13:58:48 发布

阅读量708

点赞数

分类专栏： css HTML 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/BangD/article/details/126945729

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

参考案例下拉列表美化，发现原生的下拉列表中option的高度很难改变。

考虑使用JS模拟一个下拉列表。选择的内容填充到<p>标签中。

默认ul列表隐藏，当点击下拉列表框，选择性全部展示出来。通过CSS的display属性none/block交替实现。

列表展示后，选择列表项，点击选择，列表值填入选择框；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			:root {
				--background-gradient: linear-gradient(30deg, #f39c12 30%, #f1c40f);
				--gray: #34495e;
				--darkgray: #2c3e50;
				--option: #320a28;
			}

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				color: #fff;
				background: var(--background-gradient);

				padding: 30px;
			}


			.select {
				position: relative;
				display: flex;
				width: 20em;
				height: 3em;
				border-radius: .25em;
				overflow: hidden;
			}

			select {
				/* 重置下拉列表 */
				/* 使元素看上去像标准的用户界面元素 */
				appearance: none;
				outline: 0;
				border: 0;
				box-shadow: none;

				/*  */
				flex: 1;
				padding: 0 1em;
				color: #fff;
				background-color: var(--gray);
				background-image: none;
				cursor: pointer;
			}

			/* 去掉IE的箭头 */
			select::-ms-expand {
				display: none;
			}


			/* 下箭头 */
			.select::after {
				content: '\25BC';
				position: absolute;
				top: 0;
				right: 0;
				padding: 1em;
				background-color: #34495e;
				transition: all 0.25s ease;
				/* pointer-event属性可以指定在什么情况下元素可以成为鼠标事件 */
				/* 元素不会成为鼠标事件的target */
				pointer-events: none;
			}

			.select:hover::after {
				color: #f39c12;
			}

			option {
				background-color: var(--option);
				color: red;
			}


			.demo p,
			.demo ul {
				width: 20em;
				overflow: hidden;
			}

			.demo p {
				background-color: var(--gray);
				height: 3em;
				text-align: left;
				line-height: 3em;
				padding-left: 1em;
				border-radius: .25em;

			}

			.demo .fruits {
				list-style: none;
				display: none;
			}

			.demo .fruits li {
				height: 2em;
				line-height: 2em;

			}

			.demo .fruits li:hover {
				background-color: #f1c40f;
			}
		</style>
	</head>
	<body>
		<div class="select">
			<select name="list" id="list">
				<option value="1">Pure CSS select</option>
				<option value="2">No JS</option>
				<option value="3">Nice</option>
			</select>
		</div>

		<div class="demo">
			<p class="show">默认选择项</p>
			<ul class="fruits">
				<li>苹果</li>
				<li>香蕉</li>
				<li>橘子</li>
				<li>梨子</li>
			</ul>
		</div>

		<script>
			// 获取元素
			var show = document.querySelector('.show')
			var fruits = document.querySelector('.fruits')
			var lis = fruits.querySelectorAll('li')

			show.onclick = function() {
				// fruits.style.display = 'block';
				fruits.style.display = 'block';
			}

			for (var i = 0; i < lis.length; i++) {
				// 为每一个选项设置自定义属性
				lis[i].setAttribute("data-val", i)

				// 绑定点击事件，选中的值替换到show
				lis[i].onclick = function() {
					show.innerHTML = this.innerHTML;
					fruits.style.display = 'none';
				}

			}
		</script>
	</body>
</html>