「CSS」ラジオボタン要素でチェックの場合CSSを定義する

2021年9月8日

書式
input:checked + label {cssの定義}

使用例

<!--ラジオボタンチェックされた場合にCSSを適用-->
<style>
    input:checked + label {
    background-color: skyblue;
  }
</style>
<body>
  <input type="radio" name="city" id="cftA" value="tokyo" >
  <label for="cftA">東京</label>

  <input type="radio" name="city" id="cftB" value="oosaka" />
  <label for="cftB">大阪</label>

<!--checked項目がcss適用-->
  <input type="radio" name="city" id="cftC" value="fukuoka" checked/>
  <label for="cftC">福岡</label>

</body>

 

CSS

Posted by arkgame