パーツ番号 04-07-07 ・ CSSのみ

大きめタッチ対応チェックボックス(モバイル向け)

指でも押しやすいサイズを想定した大きめのチェックボックス見本。モバイル向けフォームのデザインに適する。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-07-row">
          <span class="d04-07-07-box"></span>
          <span class="d04-07-07-box checked"></span>
        </div>

CSS

.d04-07-07-row{display:flex;gap:22px;align-items:center}
        .d04-07-07-box{width:56px;height:56px;border-radius:14px;border:3px solid #cbd5e1;background:#fff;position:relative;display:inline-block}
        .d04-07-07-box.checked{border-color:#0891b2;background:#0891b2}
        .d04-07-07-box.checked::after{content:"";position:absolute;left:18px;top:11px;width:12px;height:22px;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(40deg)}

クラス名 .d04-07-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。