html - クリックするとラジオボタンがCSSを変更します

Question

http://jsfiddle.net/JHMqG/をご覧ください。

クリックしたときにラジオボタンの背景を変更する方法を見つけようとしています。

これまでのところ、私は猫のオプションで成功していますが、犬のオプションで立ち往生しています。背景の変更に丸ボタンを含める必要があるため、犬のオプションを機能させる必要があります。

お知らせ下さい。ありがとうございました。

Answer 1

http://jsfiddle.net/JHMqG/1/
犬の場合、要素labelにはテキストのみが含まれていました。猫の場合、label要素にはテキストとラジオボタンが含まれていました。また、HTMLを少しクリーンアップしました。

Answer 2

問題は、猫のオプションの<input>直前にあったことでした<label>が、犬のオプションでは、<input>はの中にありました<label。

犬のオプションをラベルの前に移動して修正しまし<input>た。ここで機能していることがわかります。

http://jsfiddle.net/SxPvz/

Answer 3

これを参照してください：

デモ

HTMLを少し変更しました。

<div>
<input type="radio" name=1 Value=420 id="a1">
<label for="a1" class="radiostyle" >Cat ($420)</label>
</div>
<div>
    <input type="radio" name=1 Value=375 id="a2">
    <label for="a2" class="radiostyle">Dog ($375)</label>
</div>

CSSにいくつかのビットを追加したので、次のようになります。

div { margin: .5em; }
input, label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
input[type=radio] { margin-right: -1.65em; z-index: 2; }
.radiostyle{
    background-color: #CCC;
    border-radius: 8px;
    padding: 4px 4px 4px 1.75em;
}

.radiostyle:hover{
    background-color: #0F6;    
    cursor:pointer;
}
    
input[type=radio]:checked+label {
    /* Or `#a1:checked+label` if you only want it for that input */
    background-color: #0F6;
}