「CSS」ラジオボタンに:defaultを利用するサンプル

2014年1月7日2021年8月19日

説明
: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>

2.CSSコード

input:default {
  box-shadow: 0 0 2px 1px green;
}

input:default + label {
  color: green;
}