7.css
Version:
A design system for building faithful recreations of the Windows 7 UI.
2 lines • 1.37 kB
CSS
input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;font:9pt Segoe UI,SegoeUI,Noto Sans,sans-serif;margin:0;opacity:0}input[type=checkbox]+label{align-items:center;display:inline-flex;font:9pt Segoe UI,SegoeUI,Noto Sans,sans-serif;position:relative}input[type=checkbox]+label:before{background:#f6f6f6;border:1px solid #8e8f8f;box-shadow:inset 0 0 0 1px #f4f4f4,inset 1px 1px 0 1px #aeaeae,inset -1px -1px 0 1px #ddd,inset 3px 3px 6px #ccc;box-sizing:border-box;content:"";display:inline-block;height:14px;margin-right:6px;transition:.4s;width:14px}input[type=checkbox]+label:hover:before{background:#e9f7fe;border-color:#3c7fb1;box-shadow:inset 0 0 0 1px #def9fa,inset 1px 1px 0 1px #79c6f9,inset -1px -1px 0 1px #c6e9fc,inset 3px 3px 6px #b1dffd}input[type=checkbox]:focus-visible+label{outline:1px dotted #000}input[type=checkbox]:checked+label:after{color:#4a5f97;content:"\2714";display:block;font-weight:700;left:2px;position:absolute;top:0}input[type=checkbox]:disabled+label{color:#6d6d6d}input[type=checkbox]:disabled+label:before{background:linear-gradient(to bottom right,#f0f0f0,#fbfbfb);border:1px solid #b1b1b1;box-shadow:none;content:"";display:inline-block;height:14px;margin-right:6px;width:14px}input[type=checkbox]:disabled+label:after{color:#bfbfbf}
/*# sourceMappingURL=checkbox.css.map */