HTML(即超文本標記語言)用於建立網頁並定義其結構和內容,CSS 能夠對其進行樣式設定。 HTML 具有用於建立網頁(包括 Web 表單)的多種元素。
複選框是Web表單和使用者介面的重要組成部分。當需要選擇多個選項時,使用複選框。預設情況下,HTML中的複選框很小,這有時不適合設計要求。但是,可以使用CSS根據需求調整複選框的大小。
在 HTML 中,複選框是一種表單元素,允許使用者從清單中選擇一個或多個選項,它由一個小框表示。複選框可以選中或取消選中,選中狀態由框內的勾選或複選標記表示。複選框也是使用 HTML 標籤建立的,並將 type 屬性設為 checkbox。例如 -
<input type="checkbox" id="checkbox" name="checkbox" value="1"> <label for="checkbox-1">Checkbox 1</label>
在上面的程式碼中,我們建立了一個帶有 ID、名稱和屬性的複選框。 label 元素上的「for」屬性對應到複選框的 ID。
以下是使用HTML建立複選框的範例。
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } </style> </head> <body> <h2>Create a Checkbox Using HTML</h2> <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1"> <label for="checkbox-1">Option 1</label> <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2"> <label for="checkbox-2">Option 2</label> </body> </html>
CSS是一種強大的工具,用於樣式化HTML元素。它允許我們改變複選框的可視化大小。我們可以使用"width"和"height"屬性來設定複選框的大小。透過使用下面的CSS程式碼,我們可以設定複選框的寬度和高度 −
input[type=checkbox] { width: 30px; height: 30px; }
上面的程式碼會將複選框的高度和寬度設為 30 像素。
以下是一個範例,設定複選框的高度和寬度為30像素。
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } input[type=checkbox] { width: 30px; height: 30px; } </style> </head> <body> <h2>Create a Checkbox Using HTML</h2> <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1"> <label for="checkbox-1">Option 1</label> <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2"> <label for="checkbox-2">Option 2</label> </body> </html>
除了設定複選框的大小之外,它們的外觀也可以在CSS中進行樣式設定。 CSS允許開發人員更改複選框的視覺大小以及檢測點擊事件的命中框。例如,我們可以使用下列CSS程式碼來設定複選框的樣式。
input[type=checkbox] { -webkit-appearance: none; width: 40px; height: 40px; background-color: red; border-radius: 5px; border: 3px solid lightgray; margin-right: 10px; } input[type=checkbox]:checked { background-color: lightgreen; }
在上面的 CSS 程式碼 -
Display − inline-block;將display屬性設定為inline-block。
寬度和高度屬性設定複選框的大小。
background-color屬性設定複選框的背景顏色。
Border-radius 屬性使複選框的邊緣變圓。
Border 屬性為複選框新增邊框和邊框顏色。
Margin-right 屬性設定複選框和標籤之間的距離。
:Checked 偽類別選擇器用於選取複選框後的狀態。
Background-color 屬性在使用者勾選複選框時改變其背景顏色。
這是設定複選框樣式的完整程式碼範例。
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } input[type=checkbox] { -webkit-appearance: none; display: inline-block; width: 40px; height: 40px; background-color: red; border-radius: 5px; border: 3px solid lightgray; margin-right: 10px; } input[type=checkbox]:checked { background-color: lightgreen; } </style> </head> <body> <h2>Create a Checkbox Using HTML</h2> <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1"> <label for="checkbox-1">Option 1</label> <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2"> <label for="checkbox-2">Option 2</label> </body> </html>
在這裡,我們討論如何在 HTML 和 CSS 中設定複選框大小。 HTML 方法僅更改複選框的視覺大小,而 CSS 方法也允許開發人員更改點擊框。透過使用 CSS,我們還可以設定複選框的樣式,使其更具視覺吸引力和用戶友好性。
以上是如何在HTML/CSS中設定複選框的大小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!