html复选框select,html自定义checkbox、radio、select —— select篇

上一篇《html自定义checkbox、radio、select —— checkbox、radio篇》介绍了我们是怎么将 html 自带的 checkbox、radio 改成我们自定义的UI的，现在来说说怎么将 html 自带的 select 改成我们自定义的UI(由于时间关系，我们只完成了单选部分的转换，而多选部分的转换没做，后续会找个时间补上)。

select 跟 checkbox、radio 方法大致相同。在 Bootstrap 中，有一个"按钮式下拉菜单"的组件，我们是在这个基础上进行修改的。

效果：

        

结构大致是：

其中，

包住的就是展示出来的UI，是正常情况下显示的，

• 是各个选项，是隐藏的。

首先，使用 Bootstrap 中 "btn dropdown-toggle" 样式，并为其添加、标签用来显示文字和下拉的图标，我们有对部分 ".dropdown-" 相关的样式做了扩展和改写。

var $button &