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

View File

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