bootstrap4 单选框 默认_复选框与单选按钮（自定义样式）《 Bootstrap 4：表单 》...

现在页面上显示的是一个默认的复选框元素 ..

Bootstrap 提供了一种自定义的样式，可以完成改变这个复选框的样式 .. 复制一份 .. 然后注释掉上面这个复选框 ..

在这个复选框元素上，需要添加一个 custom-control-input .. 它会让复选框变成完全透明的 ..

然后在包装它的这个 label 元素上再添加两个类 .. 一个 custom-control .. 还需要一个 custom-checkbox ..

用标签包装复选框，点击标签可以切换选择复选框 ..

然后在这个复选框元素的下面再添加一个 span 标签，上面加上 custom-control-indicator .. 自定义的复选框的样式就是这个元素提供的 .. 它里面会用到自定义的小图标 ..

复选框还需要一段描述 .. 再用一组 span 元素，上面加上 custom-control-description .. 里面输入一个 A ..

现在你看到的就是一个自定义样式的复选框 .. 我们可以跟默认的复选框元素对比一下 ..

勾选一下这个自定义样式的复选框 .. 表示勾选状态的是一个小图标 ... 可以检查一下 ..

选中这个 custom-control-indicator .. 上面有个样式 .. 就是设置了一下复选框被勾选以后它的样式 .. 里面用了 backgroud-image 设置了一个背景图像，这个背景图像就是一个矢量的小图标 ..

自定义样式的单选按钮，跟复选框的用法是一样的 .. 可以直接复制一份 .. 然后把 label 元素上的 custom-checkbox ，换成 custom-radio .. 再把 input 的类型换成 radio ..

现在界面上就会显示一个自定义样式的单选按钮 ..