Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
自定义复选框
如果要自定义一个复选框，可以设置 <div> 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 <div> 里头，然后复选框设置为 type="checkbox"，类为 .custom-control-input。
复选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配复选框的 id。
Bootstrap4 实例
<form><divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheck"name="example1"><labelclass="custom-control-label"for="customCheck">自定义复选框</label></div></form>
自定义单选框
如果要自定义一个单选框，可以设置 <div> 为父元素，类为 .custom-control 和 .custom-radio，单选框作为子元素放在该 <div> 里头，然后单选框设置为 type="radio"，类为 .custom-control-input。
单选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配单选框的 id。
Bootstrap4 实例
<form><divclass="custom-control custom-radio"><inputtype="radio"class="custom-control-input"id="customRadio"name="example1"value="customEx"><labelclass="custom-control-label"for="customRadio">自定义单选框</label></div></form>
自定义控件显示在同一行
我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件，这样自定义表单控件就能显示在同一行：
Bootstrap4 实例
<form><divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"class="custom-control-input"id="customRadio"name="example"value="customEx"><labelclass="custom-control-label"for="customRadio">自定义单选框 1</label></div><divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"class="custom-control-input"id="customRadio2"name="example"value="customEx"><labelclass="custom-control-label"for="customRadio2">自定义单选框 2</label></div></form>
自定义选择菜单
创建自定义选择菜单可以在 <select> 元素上添加 .custom-select 类:
Bootstrap4 实例
<form><selectname="cars"class="custom-select-sm"><optionselected>自定义选择菜单</option><optionvalue="Google">Google</option><optionvalue="Runoob">Runoob</option><optionvalue="Taobao">Taobao</option></select></form>
如果我们要设置自定义选择菜单大小，可以使用 .custom-select-sm、.custom-select-lg 来设置它们的大小:
Bootstrap4 实例
<form><selectname="cars"class="custom-select-sm"><optionselected>比较小的自定义选择菜单</option><optionvalue="Google">Google</option><optionvalue="Runoob">Runoob</option><optionvalue="Taobao">Taobao</option></select><selectname="cars"class="custom-select-lg"><optionselected>比较大的自定义选择菜单</option><optionvalue="Google">Google</option><optionvalue="Runoob">Runoob</option><optionvalue="Taobao">Taobao</option></select></form>
自定义滑块控件
我们可以在 input 为 type="range" 的输入框中添加 .custom-range 类来设置自定义滑块控件:
Bootstrap4 实例
<form><labelfor="customRange">自定义滑块控件</label><inputtype="range"class="custom-range"id="customRange"name="points1"></form>
自定义文件上传控件
我们可以在父元素添加 .custom-file 类，然后在 input 设置为 type="file" 并添加 .custom-file-input:
上传控件的文本使用 label 标签，标签使用 .custom-file-label 类，label 的 for 属性值需要匹配上传控件 id。
Bootstrap4 实例
<form><divclass="custom-file"><inputtype="file"class="custom-file-input"id="customFile"><labelclass="custom-file-label"for="customFile">选择文件</label></div></form>