使用:checked選擇器實作自定義單選按鈕效果

今天在學習css3時用:checked選擇器實作自定義單選按鈕效果，感覺這個選擇器很棒，來記錄一下。

:checked表示選中狀态，可以配合其他标簽實作自定義樣式。

例如，想實作這個效果：

部分css代碼如下：

.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}
           

在這裡，首先用span定義對号選中的樣式；之後使用“+span”選中type類型為checkbox的input元素後面挨着的span标簽元素；

最後，使用opacity: 0和opacity: 1實作未選中狀态和選中狀态（opacity: 0表示完全透明，opacity: 1便是完全不透明）。