「CSS」ラジオボタンに:defaultを利用するサンプル
説明
:default は CSS の擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。
使用例
1.htmlコード
<fieldset>
<legend>季節</legend>
<input type="radio" name="season" id="spring">
<label for="spring">春</label>
<input type="radio" name="season" id="summer" checked>
<label for="summer">夏</label>
<input type="radio" name="season" id="fall">
<label for="fall">秋</label>
<input type="radio" name="season" id="winter">
<label for="winter">冬</label>
</fieldset>
<fieldset>
<legend>季節</legend>
<input type="radio" name="season" id="spring">
<label for="spring">春</label>
<input type="radio" name="season" id="summer" checked>
<label for="summer">夏</label>
<input type="radio" name="season" id="fall">
<label for="fall">秋</label>
<input type="radio" name="season" id="winter">
<label for="winter">冬</label>
</fieldset>
<fieldset> <legend>季節</legend> <input type="radio" name="season" id="spring"> <label for="spring">春</label> <input type="radio" name="season" id="summer" checked> <label for="summer">夏</label> <input type="radio" name="season" id="fall"> <label for="fall">秋</label> <input type="radio" name="season" id="winter"> <label for="winter">冬</label> </fieldset>
2.CSSコード
input:default {
box-shadow: 0 0 2px 1px green;
}
input:default + label {
color: green;
}
input:default {
box-shadow: 0 0 2px 1px green;
}
input:default + label {
color: green;
}
input:default { box-shadow: 0 0 2px 1px green; } input:default + label { color: green; }