CSS

【CSS】Pure CSSのチェックボックスとラジオボタンFancy checkboxes and radio Buttons

February 26, 2017
pure-css-checkbox

Fancy checkboxes and radio ButtonsはCSSのみ、javascriptなし、軽量(3kB)のチェックボックスとラジオボタン

Usage

チェックボックスとラジオボタンの一般的な使い方

<label><input name="checkbox" type="checkbox"> Choice A</label>
<label><input name="radio" type="radio"> Option A</label>

以下に変更

<div class="pure-checkbox">
  <input id="checkbox1" name="checkbox" type="checkbox">
  <label for="checkbox1">Choice A</label>
</div>

<div class="pure-radiobutton">
  <input id="radio1" name="radio" type="radio">
  <label for="radio1">Option A</label>
</div>