Bootstrap4 可以自定義一些表單的樣式來替換瀏覽器默認(rèn)的樣式。
如果要自定義一個(gè)復(fù)選框铡溪,可以設(shè)置
復(fù)選框的文本使用?label?標(biāo)簽,標(biāo)簽使用 .custom-control-label 類账磺,label?的?for?屬性值需要匹配復(fù)選框的 id芹敌。
自定義復(fù)選框
如果要自定義一個(gè)單選框,可以設(shè)置?<div>?為父元素垮抗,類為 .custom-control 和 .custom-radio负甸,單選框作為子元素放在該?<div>?里頭经瓷,然后單選框設(shè)置為?type="radio"?败明,類為 .custom-control-input歌殃。
單選框的文本使用?label?標(biāo)簽,標(biāo)簽使用 .custom-control-label 類辞嗡,label?的?for?屬性值需要匹配單選框的?id豁护。
自定義單選框
我們可以在外部元素上使用 .custom-control-inline 類來包裹自定義表單控件,這樣自定義表單控件就能顯示在同一行:
自定義單選框 1自定義單選框 2
創(chuàng)建自定義選擇菜單可以在?<select>?元素上添加 .custom-select 類:
自定義選擇菜單GoogleRunoobTaobao
如果我們要設(shè)置自定義選擇菜單大小欲间,可以使用 .custom-select-sm楚里、.custom-select-lg 來設(shè)置它們的大小:
<!-- 小 -->比較小的自定義選擇菜單GoogleRunoobTaobao<!-- 大 -->比較大的自定義選擇菜單GoogleRunoobTaobao
我們可以在?input?為?type="range"?的輸入框中添加 .custom-range 類來設(shè)置自定義滑塊控件:
自定義滑塊控件
我們可以在父元素添加?.custom-file?類,然后在?input?設(shè)置為?type="file"?并添加 .custom-file-input:
上傳控件的文本使用?label?標(biāo)簽猎贴,標(biāo)簽使用 .custom-file-label 類班缎,label?的?for?屬性值需要匹配上傳控件?id。
選擇文件