Skip to content

Commit

Permalink
Fix positioning of checkbox checkmark
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
samhed committed Jan 2, 2023
1 parent 3553a45 commit 5b7d2a6
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions app/styles/input.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 5b7d2a6

Please sign in to comment.