proxmox-mirrors/mirror_novnc
1
0
Fork 0
mirror of https://git.proxmox.com/git/mirror_novnc synced 2025-08-15 13:43:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add indeterminate styling to checkboxes and radios

Browse Source 
This is used when the control is neither checked or unchecked.
This commit is contained in:
Samuel Mannehed 2025-01-12 02:10:12 +01:00
parent 633b4c266d
commit 7fdcc66d2c
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/styles/input.css
View File

@ -139,7 +139,9 @@ input[type=checkbox]:focus-visible {
outline-color: var(--novnc-lightblue); outline-color: var(--novnc-lightblue);
} }
input[type=checkbox]::before, input[type=checkbox]::before,
input[type=radio]::before { input[type=checkbox]::after,
input[type=radio]::before,
input[type=radio]::after {
content: ""; content: "";
display: block; /* width & height doesn't work on inline elements */ display: block; /* width & height doesn't work on inline elements */
transition: inherit; transition: inherit;
@ -150,6 +152,13 @@ input[type=radio]::before {
baseline of text inside them will be used instead. */ baseline of text inside them will be used instead. */
position: absolute; position: absolute;
} }
input[type=checkbox]::after,
input[type=radio]::after {
width: 10px;
height: 2px;
background-color: transparent;
border-radius: 2px;
}
/* /*
* Checkboxes * Checkboxes
@ -157,7 +166,8 @@ input[type=radio]::before {
input[type=checkbox] { input[type=checkbox] {
border-radius: 4px; border-radius: 4px;
} }
input[type=checkbox]:checked { input[type=checkbox]:checked,
input[type=checkbox]:indeterminate {
background-color: var(--novnc-blue); background-color: var(--novnc-blue);
} }
input[type=checkbox]::before { input[type=checkbox]::before {
@ -172,6 +182,9 @@ input[type=checkbox]::before {
input[type=checkbox]:checked::before { input[type=checkbox]:checked::before {
border-color: white; border-color: white;
} }
input[type=checkbox]:indeterminate::after {
background-color: white;
}
/* /*
* Radiobuttons * Radiobuttons
@ -193,6 +206,9 @@ input[type=radio]::before {
input[type=radio]:checked::before { input[type=radio]:checked::before {
opacity: 1; opacity: 1;
} }
input[type=radio]:indeterminate::after {
background-color: black;
}
/* /*
* Range sliders * Range sliders