「CSS」:checkedでラジオボタンをチェックするCSSサンプル
書式
セレクタ:checked{
}
ラジオボタンやチェックボックスでチェックされた場合にCSSを適用します。
使用例
<style>
input:checked + label {
background-color: SkyBlue;
}
</style>
<body>
<input type="radio" name="city" id="ta" value="tokyo" />
<label for="ta">東京</label>
<input type="radio" name="city" id="tc" value="fukuoka" checked />
<label for="tc">福岡</label>
</body>
<style>
input:checked + label {
background-color: SkyBlue;
}
</style>
<body>
<input type="radio" name="city" id="ta" value="tokyo" />
<label for="ta">東京</label>
<input type="radio" name="city" id="tc" value="fukuoka" checked />
<label for="tc">福岡</label>
</body>
<style>
input:checked + label {
background-color: SkyBlue;
}
</style>
<body>
<input type="radio" name="city" id="ta" value="tokyo" />
<label for="ta">東京</label>
<input type="radio" name="city" id="tc" value="fukuoka" checked />
<label for="tc">福岡</label>
</body>
結果
ラジオボタンをチェックするとラベルとラジオボタンの背景の色(SkyBlue)が変わります。