master @ 39 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ .checkbox { │
│ cursor: pointer; │
│ white-space: pre; │
│ │
│ // The native input stays focusable but takes no grid cells; the mark │
│ // renders its state. │
│ input { │
│ position: absolute; │
│ opacity: 0; │
│ width: 1px; │
│ height: 1px; │
│ margin: 0; │
│ pointer-events: none; │
│ } │
│ │
│ .checkbox-mark::before { │
│ content: "[ ]"; │
│ } │
│ input:checked + .checkbox-mark::before { │
│ content: "[x]"; │
│ } │
│ │
│ input:focus-visible + .checkbox-mark { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ │
│ &:hover:not(:has(input:disabled)) { │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ } │
│ │
│ &:has(input:disabled) { │
│ color: var(--ink-soft); │
│ opacity: 0.55; │
│ cursor: not-allowed; │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ .checkbox { │
│ cursor: pointer; │
│ white-space: pre; │
│ │
│ // The native input stays focusable but ta │
│ kes no grid cells; the mark │
│ // renders its state. │
│ input { │
│ position: absolute; │
│ opacity: 0; │
│ width: 1px; │
│ height: 1px; │
│ margin: 0; │
│ pointer-events: none; │
│ } │
│ │
│ .checkbox-mark::before { │
│ content: "[ ]"; │
│ } │
│ input:checked + .checkbox-mark::before { │
│ content: "[x]"; │
│ } │
│ │
│ input:focus-visible + .checkbox-mark { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ │
│ &:hover:not(:has(input:disabled)) { │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ } │
│ │
│ &:has(input:disabled) { │
│ color: var(--ink-soft); │
│ opacity: 0.55; │
│ cursor: not-allowed; │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET