CSS復(fù)選框怎么打鉤

在CSS中，我們可以使用偽元素和CSS屬性來(lái)創(chuàng)建自定義的復(fù)選框樣式，以下是一個(gè)基本的示例，展示了如何使用CSS來(lái)創(chuàng)建一個(gè)帶有打鉤符號(hào)的復(fù)選框。

HTML結(jié)構(gòu)：

<label class="custom-checkbox">
  <input type="checkbox" />
  打鉤
</label>

CSS樣式：

.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}
.custom-checkbox input[type="checkbox"] {
  display: none;
}
.custom-checkbox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 3px;
}
.custom-checkbox::after {
  content: "√";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 12px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  font-size: 14px;
  color: #000;
  opacity: 0;
  transform: scale(0);
}
.custom-checkbox input[type="checkbox"]:checked ~ ::after {
  opacity: 1;
  transform: scale(1);
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)帶有打鉤符號(hào)的復(fù)選框，我們給標(biāo)簽元素添加了一個(gè)自定義的類名custom-checkbox，然后在這個(gè)類名下定義了一些CSS樣式，我們使用了偽元素::before來(lái)創(chuàng)建復(fù)選框的背景，使用::after來(lái)創(chuàng)建打鉤符號(hào)，通過(guò)input[type="checkbox"]元素的:checked偽類，我們可以控制打鉤符號(hào)的顯示狀態(tài)。