CSS標籤單選按鈕選擇

Question

我試圖使用下列標準修改我的單選按鈕：單擊或懸停在

時

• 「否」單選按鈕變成紅色，並顯示「N」爲內容「是」單選按鈕變成綠色，並點擊或懸停時會顯示「Y」爲內容在

這是我到目前爲止有：http://jsbin.com/putoz/2/edit

的問題是，我無法找到「.yes-label」和「.no-label」的正確CSS選擇器。

Answer 1

如何使用id屬性區分按鈕？

像這樣的東西來改變點擊背景顏色：

input[id="appointment-yes"]:checked + label:before { ;} 
input[id="appoinment-no"]:checked + label:before { ;} (appointment-no is missing a 't'?) 

然後用這些懸停過程中改變背景顏色？

.yes-label:hover:before { ; } 
.no-label:hover:before { ; }