改變單選按鈕的不透明度被查

Question

我有這個網站：

<label class="fakeRadio active"> 
    <input type="radio"> 
</label> 

這是我的CSS：

.fakeRadio input[type=radio]:checked + .fakeRadio.active { 
    opacity:0.5; 
} 

出於某種原因，fakeRadio活動類沒有得到不透明，任何想法，爲什麼？

Answer 1

你的CSS更改爲

.fakeRadio input[type=radio]:checked, .fakeRadio.active { 
    opacity:0.5; 
} 

DEMO http://jsfiddle.net/kevinPHPkevin/mwNFD/

如果要更改標籤ONY然後做這個

DEMO http://jsfiddle.net/kevinPHPkevin/mwNFD/

<input type="radio"> 
<label class="fakeRadio active"> 
    Label text 
</label> 



input[type="radio"]:checked +label { 
    opacity:0.5; 
} 

Answer 2

你要使用CSS級別4和父級選擇器

在這裏閱讀更多http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

E! > F an E element parent of an F element 

http://www.w3.org/TR/selectors4/#subject

更好地利用這個

<input id=myInput type="radio"> 
    <label for="myInput" class="fakeRadio active"> </label> 

的CSS：

.fakeRadio input[type=radio] + label[for=myInput] { 
     margin-left:-4px; 
    } 

.fakeRadio input[type=radio]:checked + label[for=myInput] { 
    opacity:0.5; 
}