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

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

グレープフルーツ

パイナップル

ブルーベリー

 

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

Sサイズ以下

Mサイズ

Lサイズ以上

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>