CSS3で作るきれいで認識しやすいチェックボックスです。これだけ数がそろうと対応の幅が広がります。また、CSSなので、サイズの変更も比較的容易です。

スタイルの比較用に上側にブルーの背景、下側にグレイの背景の2種類を並べています。また、上側はチェックボックスがオン、下側はチェックボックスがオフの状態です。どちらもオン、オフの切り替えが可能です。