Trang chủ
Checkbox v1
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="cb"> <div class="w"> <input type="checkbox" id="c1" class="i" /> <span class="ic"> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M493.3 128l-22.6 22.6-256 256L192 429.3l-22.6-22.6-128-128L18.7 256 64 210.7l22.6 22.6L192 338.7 425.4 105.4 448 82.7 493.3 128z" /> </svg> </span> </div> <label class="lb" for="c1">Checkbox</label> </div>
CSS
Copy
:root { --s: 30px; } .cb { display: flex; align-items: center; gap: 8px; } .cb .w { position: relative; width: var(--s); height: var(--s); } .cb .i { appearance: none; -webkit-appearance: none; width: var(--s); height: var(--s); background: #e5e7eb; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: 0.2s ease; } .cb .i:hover { background: #d1d5db; } .cb .i:checked { background: #1dc071; border-color: #fff; } .cb .i:checked + .ic { display: block; } .cb .ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; display: none; pointer-events: none; } .cb .ic svg { height: 26px; } .cb .lb { color: #4c4c4c; font-size: 16px; font-weight: 500; cursor: pointer; }
JS
Copy