「CSS」:checkedでラジオボタンをチェックするCSSサンプル

2022年2月18日

書式
セレクタ: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>

結果
ラジオボタンをチェックするとラベルとラジオボタンの背景の色(SkyBlue)が変わります。

CSS

Posted by arkgame

関連記事: