CSS復選框的寫法

在CSS中，我們可以使用偽元素::before和::after來創(chuàng)建復選框，這種方法不僅美觀，而且易于實現(xiàn)。

我們需要創(chuàng)建一個HTML元素，例如一個<div>元素，用于表示復選框，我們可以使用CSS的偽元素來裝飾這個元素。

下面是一個簡單的例子：

HTML代碼：

<div class="checkbox">
  <label for="myCheckbox">我的復選框</label>
  <input type="checkbox" id="myCheckbox">
</div>

CSS代碼：

.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}
.checkbox::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 50%;
  display: none;
}
.checkbox input[type="checkbox"] {
  display: none;
}

在這個例子中，我們創(chuàng)建了一個帶有復選框的<div>元素，使用偽元素::before和::after來裝飾這個元素，我們可以實現(xiàn)復選框的外觀。::before偽元素表示復選框的外部，::after偽元素表示復選框內(nèi)部的選中標記，通過修改這兩個偽元素的樣式，我們可以輕松地改變復選框的外觀，我們還使用了input[type="checkbox"]選擇器來隱藏原生的復選框元素，以提升用戶體驗。