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.

1 files changed, 3 insertions, 2 deletions

diff --git a/app/styles/input.css b/app/styles/input.css
index c5897ab..eaf083c 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -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;