svgを利用することで、デザインの拡張性に乏しいチェックボックスとラジオボタンに個性的な動きを追加することができます。モダンブラウザはほぼ対応していますが、 CSS3の一部をサポートしていないブラウザ(例えばSafari4)などでは、ラジオボタンのベースの丸が四角になってしまいますが、機能に違いはありません。

チェックボックス(1)

ラジオボタン(1)

チェックボックス(2)

ラジオボタン(2)

チェックボックス(3)

ラジオボタン(3)

チェックボックス(4)

特殊なチェック(除外項目)

※引用、参考:Animated Checkboxes and Radio Buttons with SVG | Codrops
戻るボタン