检查单选按钮样式兄弟标签

Question

I working on some functionality at the moment, that mask a radio input to look like coloured square, when a radio is selected the sibling label background should change colour, what is happening though is whatever radio button I check, the第一个标签总是改变颜色，这是我的 fiddle、

http://jsfiddle.net/heZBT/3622/

我认为这段代码足以进行正确的标签更改，

input:checked + label {
   background:yellow;
}

我尝试的一切只会在检查任何无线电时使第一个无线电兄弟标签变黄。

Answer 1

您的 labels/buttons 具有相同的 id 和 for 属性。更改它们并按预期工作：http://jsfiddle.net/bfehyv2a/

检查单选按钮样式兄弟标签

Checked radio button style sibling label

html

css

radio-button