fix radio and checkbox label positioning

jdan · Apr 23, 2020 · 59a40ed · 59a40ed
1 parent 6ccdbd0
commit 59a40ed
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/build/98.css b/build/98.css
@@ -265,6 +265,11 @@ input[type="checkbox"] {
   border: none;
 }
 
+input[type="radio"] + label,
+input[type="checkbox"] + label {
+  line-height: 13px;
+}
+
 input[type="radio"] + label {
   position: relative;
   margin-left: 18px;
@@ -273,6 +278,7 @@ input[type="radio"] + label {
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
+  top: 0;
   left: -18px;
   display: inline-block;
   width: 12px;

diff --git a/docs/98.css b/docs/98.css
@@ -265,6 +265,11 @@ input[type="checkbox"] {
   border: none;
 }
 
+input[type="radio"] + label,
+input[type="checkbox"] + label {
+  line-height: 13px;
+}
+
 input[type="radio"] + label {
   position: relative;
   margin-left: 18px;
@@ -273,6 +278,7 @@ input[type="radio"] + label {
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
+  top: 0;
   left: -18px;
   display: inline-block;
   width: 12px;

diff --git a/style.css b/style.css
@@ -257,6 +257,11 @@ input[type="checkbox"] {
   border: none;
 }
 
+input[type="radio"] + label,
+input[type="checkbox"] + label {
+  line-height: 13px;
+}
+
 input[type="radio"] + label {
   position: relative;
   margin-left: var(--radio-total-width);
@@ -265,6 +270,7 @@ input[type="radio"] + label {
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
+  top: 0;
   left: calc(-1 * (var(--radio-total-width-precalc)));
   display: inline-block;
   width: var(--radio-width);