完爆默认样式，好看的select下拉框（带搜索功能）

最新推荐文章于 2026-04-20 23:23:37 发布

原创

最新推荐文章于 2026-04-20 23:23:37 发布 · 6.5k 阅读

标签

#jquery #css #javascript #html

本文介绍了如何使用HTML、CSS和JavaScript（包括jQuery）创建一个不仅美观，还具备搜索功能的Select下拉框。通过示例代码，展示了不带搜索和带搜索两种版本的实现方法。

标配版在这里插入图片描述
豪华搜索版
这个是利用input框和ul来实现一个下拉框的效果。
具体代码如下
不带搜索：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.selectBox{
   
   
				width: 300px;
				height: 36px;
				line-height: 36px;
				background: #f72323;
			}
			.inputCase{
   
   
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
			.inputCase input.imitationSelect{
   
   
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 1px solid #ccc;
				display: block;
				text-indent: 15px;
				cursor: default;
			}
			.inputCase i.fa{
   
   
				position: absolute;
				right: 10px;
				top: 10px;
				color: #007AFF;
			}
			.selectUl{
   
   
				display: none;
				padding: 0;
				margin: 0;
				border-bottom: 1px solid #ccc;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;

			}
			.selectUl li{
   
   
				height: 36px;
				line-height: 36px;
				list-style: none;
				text-indent: 15px;
				border-bottom: 1px solid #ccc;transition: all .5s ease 0s;

			}
			.selectUl li:hover{
   
   
				background: #ddd;
			}
			.selectUl li:last-child{
   
   
				border-bottom: 0 none;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	</head>
	<body>
        <div class="selectBox">
        	<div class="inputCase">
				<input class="imitationSelect" type="text" value="橘子" readonly/>
				<i class="fa fa-caret-down"></i>
			</div>
			<ul class="selectUl">
				<li data-val="橘子" data-id="1"  class="actived_li">橘子</li>
				<li data-val="苹果" data-id="2">苹果</li>
				<li data-val="桃子" data-id="3">桃子</li>

最低0.47元/天解锁文章