自定义Select下拉框

最新推荐文章于 2025-07-21 14:23:33 发布

NingkitTse

最新推荐文章于 2025-07-21 14:23:33 发布

阅读量5.3k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_22865115/article/details/90462064

本文介绍了如何自定义Select下拉框，包括实现步骤、效果展示和与原生Select的区别。自定义Select允许定制样式、分组选项，并能提供更丰富的交互体验。

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

背景

经常写Web页面的同学可能会碰到如下的诉求：

新增一个下拉框
要求做的好看一点（鼠标放上去的颜色与原生Select不同，Select背景色也要有所变化）
下拉框中的元素需要分组，分组以后最好还能有分割线以示区别
下拉框的点击按钮要使用自定义的图标
…

若是没有相关经验，拿到这种诉求可能头都要爆炸，不过当我们有过相关经验以后就会发现还真可以这么实现，而且自己做出来的Select既好玩又好看，自信心瞬间爆棚，下面小编在此分享一种实现方式：

实现步骤

自定义下拉框

<div class="col">
     <button id="custSelect-btn">Click me!</button>
     <div>
           <div id="custSelect-bg" class="custSelect-bg" onclick="bgClick()"></div>
           <ul id="custSelect-ul" class="custSelect-ul">
	            <li class="custSelect-li active" onclick="chooseLi()" value="Chinese">Chinese</li>
	            <li class="custSelect-li" onclick="chooseLi()" value="English">English</li>
	            <li class="custSelect-li" onclick="chooseLi()" value="French">French</li>
	            <li class="