パーツ番号 04-02-03 ・ CSSのみ

アニメーションチェックボックス

チェックマークがシュッと描かれるカスタムチェックボックス。Contact Form 7の同意チェック欄を目を引くデザインに置き換えられます。

cssinput

プレビュー

ソースコード

HTML

<label class="d04-02-03-check">
          <input type="checkbox">
          <span class="d04-02-03-box">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <polyline points="4.5 12.5 10 18 19.5 6.5" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
          <span class="d04-02-03-txt">利用規約に同意する</span>
        </label>

CSS

.d04-02-03-check{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
        .d04-02-03-check input{position:absolute;opacity:0;width:0;height:0}
        .d04-02-03-box{
          width:28px;height:28px;border-radius:7px;flex:0 0 auto;
          border:2px solid #c3c9d4;background:#fff;
          display:flex;align-items:center;justify-content:center;
          transition:background .25s,border-color .25s,transform .15s;
        }
        .d04-02-03-box svg{width:20px;height:20px}
        .d04-02-03-box polyline{
          stroke-dasharray:24;stroke-dashoffset:24;
          transition:stroke-dashoffset .35s ease .1s;
        }
        .d04-02-03-check input:checked + .d04-02-03-box{
          background:#22b573;border-color:#22b573;transform:scale(1.05);
        }
        .d04-02-03-check input:checked + .d04-02-03-box polyline{stroke-dashoffset:0}
        .d04-02-03-txt{font-size:15px;color:#333}

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