cssでチェックボックスとラジオボタンの装飾


よく使うので忘備録を兼ねてご紹介します。

■チェックボックス

See the Pen
checkbox
by matsu (@pochi__2828)
on CodePen.


HTML

  • ラベルをクリックした際もチェックされるように、<input>を<label>で囲む。
  • <input>の後に<span>を追加してクラス名を付与。

CSS

  • display:none;で元のチェックボックスを非表示に。
  • .check::beforeでチェックされる前の枠を装飾。
  • input[type=”checkbox”]:checked + .check::beforeでチェックされた後の枠を装飾。
  • input[type=”checkbox”]:checked + .check::afterでチェックマークを装飾。
  • マークはボーダーで生成。
  • safariは全体が下にずれるので、枠とチェックマークのtopを上方向にずらす。

■ラジオボタン

See the Pen
radio
by matsu (@pochi__2828)
on CodePen.


HTML

  • ラベルをクリックした際もチェックされるように、<input>を<label>で囲む。
  • <input>の後に<span>を追加してクラス名を付与。

CSS

  • display:none;で元のラジオボタンを非表示に。
  • .radio::beforeでチェックされる前の枠を装飾。
  • input[type=”radio”]:checked + .radio::afterでチェックマークを装飾。
  • safariは全体が下にずれるので、枠とチェックマークのtopを上方向にずらす。