CSS单选按钮标签选择器

Question

我正在尝试使用以下标准修改我的单选按钮：

• “否”radiobutton变为红色并在点击或悬停时显示“N”
• “是”radiobutton变绿并在点击或悬停时显示“Y”作为内容

这是我到目前为止所做的：http://jsbin.com/putoz/2/edit

问题是我找不到“.yes-label”和“.no-label”lasses的正确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 { ; }