2

次のマークアップを使用して、CSS だけでアクティブなラベルのスタイルを設定することは可能ですか:

<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>

内部のラジオが選択されたら、ラベルにいくつかの背景スタイルを追加したいと思います。JavaScript を使用しないことをお勧めします。モバイル用なので、古いブラウザでは動作する必要はありません。

4

2 に答える 2

2

これには、CSS :checked プロパティを使用できます。次のように書きます。

#one{
    position:relative;
}
#one:checked + span{
    display:inline-block;
    margin-left:-20px;
    padding-left:20px;
    background-color: #aa2233;
}

これをチェックしてくださいhttp://jsfiddle.net/5TxyJ/5/

于 2012-09-24T09:44:49.950 に答える
0

もちろん、ラジオボタンが選択されている場合にのみ、ラベルに「アクティブ」としましょう：

<style type="text/css">
    label.active {
      background-color: #aa2233;
    }
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>

ここ を参照してください。

于 2012-09-24T09:28:46.390 に答える