CSS

【CSS】カスタマイズ可能なCSS3のチェックボックスとラジオボタンPretty checkbox

April 29, 2017
Pretty checkbox

Pretty checkboxはカスタマイズ可能なCSS3のきれいなチェックボックスとカスタムフォントのアイコンライブラリを備えたラジオボタン。Javascriptはありません。

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.0/pretty.min.css"/>

CSS

<link rel="stylesheet" href="../PATH/pretty-checkbox/src/pretty.min.css"/>

Checkbox markup

<div class="pretty">
  <input type="checkbox"/>
  <label><i class="mdi mdi-close"></i>Check me</label>
</div>

Basic examples

Checkbox

<div class="pretty primary">
  <input type="checkbox"/>
  <label><i class="mdi mdi-check"></i> Primary</label>
</div>

Radio

<div class="pretty">
  <input type="radio" name="radio">
  <label><i class="mdi mdi-check"></i> Option 1</label>
</div>
<div class="pretty">
  <input type="radio" name="radio">
  <label><i class="mdi mdi-check"></i> Option 2</label>
</div>

MIT