HTML Checkbox 樣式詳解

一、基礎概念

Checkbox（多選框）是一種表示二元狀態的互動式控制項，用戶可以通過它選擇或取消選擇一個或多個選項。Checkbox 樣式用於控制複選框的外觀和用戶體驗，包括複選框的大小、顏色、形狀、位置等。

CSS 是控制 Checkbox 樣式的關鍵，其中最重要的屬性是 input[type=”checkbox”]，它用於選擇所有複選框。

<input type="checkbox" name="example" id="example" />
<label for="example">example</label>

其中，name 屬性定義 Checkbox 名稱，id 屬性定義 Checkbox ID，label for 屬性指定了關聯的 Checkbox ID，當用戶單擊標籤時，實際上是在單擊複選框。

二、樣式實現

1、複選框大小

Checkbox 大小可以使用 width 和 height 屬性進行控制，也可以使用偽類 before 和 after 進行自定義。

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

input[type="checkbox"]::before {
  content: "";
  width: 16px;
  height: 16px;
}

2、複選框顏色

Checkbox 顏色可以用 background-color 和 color 屬性進行控制，也可以使用偽類 before 和 after 進行自定義。

input[type="checkbox"] {
  background-color: #fff;
  color: #000;
}

input[type="checkbox"]:checked {
  background-color: #000;
  color: #fff;
}

3、複選框形狀

Checkbox 形狀可以使用 border-radius 屬性和偽類 before 和 after 進行控制。

input[type="checkbox"] {
  border-radius: 50%;
}

input[type="checkbox"]::before {
  content: "";
  border-radius: 50%;
}

4、複選框位置

Checkbox 位置可以使用 position 和 top、left、right、bottom 屬性進行控制。

input[type="checkbox"] {
  position: relative;
  top: 2px;
  left: -5px;
}

三、樣式示例

下面是一個綜合以上屬性的 Checkbox 樣式實例：

input[type="checkbox"] {
  position: relative;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 50%;
}

input[type="checkbox"]:checked::before {
  content: "\2713";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
}

四、總結

Checkbox 樣式可以在樣式文件中靈活調整，通過對多個 CSS 屬性進行定製，我們可以設計出符合用戶需求的 Checkbox 控制項樣式。