Checkbox
Configurator
CSS
.vscode-checkbox { display: inline-flex; position: relative; user-select: none;}
.vscode-checkbox input[type="checkbox"] { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}
.vscode-checkbox .icon-checked,.vscode-checkbox .icon-indeterminate { display: none; height: 16px; left: 0; position: absolute; top: 0; width: 16px;}
.vscode-checkbox .icon-checked,.vscode-checkbox .icon-indeterminate { display: none;}
.vscode-checkbox input[type="checkbox"]:checked + label .icon-checked { display: block;}
.vscode-checkbox input[type="checkbox"]:indeterminate + label .icon-indeterminate { display: block;}
.vscode-checkbox .icon { align-items: center; background-color: var(--vscode-settings-checkboxBackground); background-size: 16px; border: 1px solid var(--vscode-settings-checkboxBorder); border-radius: 3px; box-sizing: border-box; color: var(--vscode-settings-checkboxForeground); display: flex; height: 18px; justify-content: center; margin-left: 0; margin-right: 9px; padding: 0; pointer-events: none; position: relative; width: 18px;}
.vscode-checkbox input[type="checkbox"]:invalid + label .icon,.vscode-checkbox input[type="checkbox"].invalid + label .icon { background-color: var(--vscode-inputValidation-errorBackground); border-color: var(--vscode-inputValidation-errorBorder, #be1100);}
.vscode-checkbox input[type="checkbox"]:focus + label .icon { border-color: var(--vscode-focusBorder);}
.vscode-checkbox label { cursor: pointer; display: inline-flex; line-height: 18px;}
.vscode-checkbox .text { opacity: 0.9;}
.vscode-checkbox-group { display: flex;}
.vscode-checkbox-group .vscode-checkbox { display: block;}
.vscode-checkbox-group .vscode-checkbox:not(:last-child) { margin-right: 20px;}
.vscode-checkbox-group.vertical { flex-direction: column;}
.vscode-checkbox-group .vscode-checkbox { margin-right: 0; margin-bottom: 15px;}