开心档之Bootstrap4 自定义表单

2023-02-21 14:04:43 来源：博客园

Bootstrap4 自定义表单

Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。

如果要自定义一个复选框，可以设置

为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该

里头，然后复选框设置为type="checkbox"，类为 .custom-control-input。

复选框的文本使用label标签，标签使用 .custom-control-label 类，label的for属性值需要匹配复选框的 id。

(资料图)

          自定义复选框

如果要自定义一个单选框，可以设置

为父元素，类为 .custom-control 和 .custom-radio，单选框作为子元素放在该

里头，然后单选框设置为type="radio"，类为 .custom-control-input。

单选框的文本使用label标签，标签使用 .custom-control-label 类，label的for属性值需要匹配单选框的id。

          自定义单选框

我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件，这样自定义表单控件就能显示在同一行：

          自定义单选框 1  
          自定义单选框 2

创建自定义选择菜单可以在

如果我们要设置自定义选择菜单大小，可以使用 .custom-select-sm、.custom-select-lg 来设置它们的大小:

我们可以在input为type="range"的输入框中添加 .custom-range 类来设置自定义滑块控件:

  自定义滑块控件

我们可以在父元素添加.custom-file类，然后在input设置为type="file"并添加 .custom-file-input:

上传控件的文本使用label标签，标签使用 .custom-file-label 类，label的for属性值需要匹配上传控件id。

          选择文件