今天在學習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便是完全不透明)。