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