首頁 >web前端 >html教學 >如何在HTML/CSS中設定複選框的大小？

如何在HTML/CSS中設定複選框的大小？

WBOY轉載: 2023-08-30 11:37:131460瀏覽

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。

範例 1

以下是使用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 像素。

範例 2

以下是一個範例，設定複選框的高度和寬度為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 屬性在使用者勾選複選框時改變其背景顏色。

範例 3

這是設定複選框樣式的完整程式碼範例。

<!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中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇："HTML Deprecated Tags" 的中文翻譯是"HTML 棄用標籤"下一篇："HTML Deprecated Tags" 的中文翻譯是"HTML 棄用標籤"

看更多