Style the checkbox all fancy-like

src/components/auth/Register.svelte

@@ -7,7 +7,6 @@
     const { value: username } = event.target as HTMLInputElement
 
     console.log(username)
-
   }
 
   // Register the user
@@ -29,8 +28,16 @@
         on:input={checkUsername}
       />
       <div class="text-left">
-        <input type="checkbox" id="shared-computer" class="appearance-none w-5 h-5 border border-primary rounded-md" />
+        <input
-        <label for="shared-computer" class="ml-1 text-sm text-slate-700">This is a shared computer</label>
+          type="checkbox"
+          id="shared-computer"
+          class="appearance-none w-5 h-5 border border-primary checked:bg-primary rounded-md align-bottom inline-grid place-content-center"
+        />
+        <label
+          for="shared-computer"
+          class="ml-1 text-sm text-slate-700 inline-grid"
+          >This is a shared computer</label
+        >
       </div>
 
       <div class="mt-5">

src/global.css

@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+input[type='checkbox']::before {
+  content: '';
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 60ms transform ease-in-out;
+  box-shadow: inset 1em 1em #fff;
+  transform-origin: bottom left;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+input[type='checkbox']:checked::before {
+  transform: scale(1);
+}