jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix positioning of checkbox checkmark 

Changing the ::after element to be displayed as 'block' lets it be
positioned using relative. This means we can remove the confusing
"position: relative" from the checkbox.
This commit is contained in:
Samuel Mannehed 2023-01-02 14:46:33 +01:00
parent 3553a451d8
commit 5b7d2a622e
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/styles/input.css
View File

@ -86,13 +86,13 @@ option {
* Checkboxes * Checkboxes
*/ */
input[type=checkbox] { input[type=checkbox] {
position: relative;
background-color: white; background-color: white;
background-image: unset; background-image: unset;
border: 1px solid dimgrey; border: 1px solid dimgrey;
border-radius: 3px; border-radius: 3px;
width: 13px; width: 13px;
height: 13px; height: 13px;
padding: 0;
margin-right: 6px; margin-right: 6px;
vertical-align: bottom; vertical-align: bottom;
transition: 0.2s background-color linear; transition: 0.2s background-color linear;
@ -103,7 +103,8 @@ input[type=checkbox]:checked {
} }
input[type=checkbox]:checked::after { input[type=checkbox]:checked::after {
content: ""; content: "";
position: absolute; display: block; /* width & height doesn't work on inline elements */
position: relative;
top: 0; top: 0;
left: 3px; left: 3px;
width: 3px; width: 3px;