checkboxとradioボタンはhtmlのデフォルトのままだと、デザインによっては見づらかったり、正しく選択されているのか分かりづらいことがあります。そんなケースで役立ちそうなCSSのみで作る、動作が明確できれいなcheck boxとradioボタンの実装です。クリックして選択すると、明確に表現します。

次のうち、好きな食べ物は(複数選択可・checkbox)

 

服のサイズは(ひとつだけ選択・radioボタン)

htmlソース

<form class="form"> 
  <h2>次のうち、好きな食べ物は(複数選択可・checkbox)</h2>
  <div class="inputGroup">
    <input id="option1" name="option1" type="checkbox"/>
    <label for="option1">グレープフルーツ</label>
  </div>
  <div class="inputGroup">
    <input id="option2" name="option2" type="checkbox"/>
    <label for="option2">パイナップル</label>
  </div>
  <div class="inputGroup">
    <input id="option3" name="option3" type="checkbox"/>
    <label for="option3">ブルーベリー</label>
  </div>
  <p>&nbsp;</p>
  <h2>服のサイズは(ひとつだけ選択・radioボタン)</h2>
  <div class="inputGroup">
    <input id="radio1" name="radio" type="radio"/>
    <label for="radio1">Sサイズ以下</label>
  </div>
  <div class="inputGroup">
    <input id="radio2" name="radio" type="radio"/>
    <label for="radio2">Mサイズ</label>
  </div>
    <div class="inputGroup">
    <input id="radio3" name="radio" type="radio"/>
    <label for="radio3">Lサイズ以上</label>
  </div>
</form>

 

 

引用と参考;https://codepen.io/BuddyLReno/pen/boGRPO
戻るボタン