JavaScript手动样式下拉列表框
手动样式的下拉列表框，是那种看起来就挺灵活、用起来也比较顺手的组件。它摆脱了原生<select>的限制，样式、动画你说了算，整个 UI 体验立马上了一个档次。
黑色主题的网站、需要高定制交互的后台管理系统，或者你想搞个更有设计感的表单，用这个就对了。颜色、字体、阴影这些都能自定义，视觉上更统一，用户体验也会好不少。
实现起来嘛，主要靠CSS和JavaScript，或者直接用jQuery更方便。比如用$('.dropdown')控制下拉框的开合，再配合:hover或:focus加点动画，效果就出来了。
HTML 结构也简单，一般用一个div当触发器，再搭一个隐藏的选项容器，通过click事件来控制显示，逻辑挺清楚的。
有一点别忘了——响应式设计。下拉列表在手机上也得好用，不然用户一滑就全乱了。再讲究点的，还可以加上ARIA 属性，照顾下屏幕阅读器用户。
哦对了，数据多的时候别一次性都渲染出来，性能会吃不消。用懒加载或者虚拟滚动的思路更靠谱。
如果你想看看实际代码，可以翻一下select-list这个文件，或者去这两个链接瞧瞧：
如果你正好在做表单优化，或者觉得原生下拉太死板，不妨试试手动仿 select 的写法，美观、灵活、用户体验还不错。
文件大小：1.05KB
评论区