天天看點

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

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

: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便是完全不透明)。

繼續閱讀