Select模拟框自定义样式实现

自定义样式的select框，用起来真的太香了。是你想要打破浏览器默认的呆板样式，又不想牺牲交互体验时，这类模拟框就挺合适的。效果灵活，兼容性也还不错，做表单页面的时候加分。

自带的select样式确实不好看，尤其在 Chrome 和 Safari 里，怎么调都不太灵。用 JS 和 CSS 模拟一个选择框，视觉和交互就都能自己说了算，选项怎么弹、箭头怎么转，全都随你来。

用div + ul结构模拟最常见，搭配position: absolute搞定下拉，点选项触发回填就用onClick或者change事件监听，简单实用。样式那边可以根据项目风格随意定制，爱怎么美化怎么美化。

要注意的一点是，记得加键盘导航和无障碍支持哦，不然体验会掉分。还有，表单提交时，值要同步写进一个里，别漏了。

想省点时间，也可以看看这些现成的资源：

• Web 页面自定义选择框 Select，样式还蛮清爽
• select 美化自定义下拉框样式.zip，解压即用，挺方便
• jquerycssdiv 实现 select 选择框样式，适合用 JQuery 的项目
• 多选树形选择框，复杂结构选项的好帮手

如果你表单场景比较多，又想让 UI 看起来专业点，自己封一个 select 模拟框组件还是挺值得的。