Properly center the checkbox checkmark

Using a flexbox we can easily center the checkmark without using hard
coded positions.
This commit is contained in:
Samuel Mannehed 2023-01-10 16:17:08 +01:00
parent 6751cc1236
commit 4558104196
1 changed files with 4 additions and 4 deletions

View File

@ -86,6 +86,9 @@ option {
* Checkboxes
*/
input[type=checkbox] {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: white;
background-image: unset;
border: 1px solid dimgrey;
@ -104,14 +107,11 @@ input[type=checkbox]:checked {
input[type=checkbox]:checked::after {
content: "";
display: block; /* width & height doesn't work on inline elements */
position: relative;
top: 0;
left: 3px;
width: 3px;
height: 7px;
border: 1px solid white;
border-width: 0 2px 2px 0;
transform: rotate(40deg);
transform: rotate(40deg) translateY(-1px);
}
/*