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

2021年8月19日

説明
:default は CSS の擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。
使用例
1.htmlコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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コード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}

 

CSS

Posted by arkgame