fix: checkbox and radio button rendering in iOS Safari

EOX-A · Sep 5, 2023 · 81df098 · 81df098
1 parent 3fbeaa2
commit 81df098
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/utils/styles/checkbox.ts b/utils/styles/checkbox.ts
@@ -1,11 +1,14 @@
 export const checkbox = `
 input[type=checkbox] {
   appearance: none;
+  -webkit-appearance: none;
   margin: 0;
   cursor: pointer;
   display: flex;
   flex-direction: row;
   align-items: center;
+  width: 24px;
+  height: 24px;
 }
 input[type=checkbox]:after {
   display: block;

diff --git a/utils/styles/radio.ts b/utils/styles/radio.ts
@@ -1,12 +1,20 @@
 export const radio = `
 input[type=radio] {
   appearance: none;
+  -webkit-appearance: none;
   margin: 0;
   cursor: pointer;
   display: flex;
   flex-direction: row;
   align-items: center;
+  width: 24px;
+  height: 24px;
 }
+
+label span {
+  font-size: 17px !important;
+}
+
 input[type=radio]:after {
   display: block;
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004170' viewBox='0 0 24 24'%3E%3Ctitle%3Eradiobox-blank%3C/title%3E%3Cpath d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");