From d3b4088a436976d209513010702c455cffccc243 Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Tue, 2 Jan 2024 15:23:46 +0000
Subject: [PATCH] change cross symbol X

---
 src/pages/cross/v1.astro | 35 +++++++++++++++++++++++++++++++++++
 src/pages/cross/v2.astro | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index fb74e4e..9317d0a 100644
--- a/src/pages/cross/v1.astro
+++ b/src/pages/cross/v1.astro
@@ -188,6 +188,41 @@ import Layout from "../../layouts/Layout.astro";
 </script>
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
+    input[type="checkbox"]{
+    -webkit-appearance: initial;
+    appearance: initial;
+    border: 1px solid gray;
+    border-radius: 5px;
+    /* background: gray; */
+    width: 40px;
+    height: 40px;
+    
+    position: relative;
+}
+input[type="checkbox"]:checked {
+    background: blue;
+}
+input[type="checkbox"]:checked:after {
+    content: "X";
+    color: #fff;
+    border: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    /*
+     * If you want to fully change the check appearance, use the following:
+     * content: " ";
+     * width: 100%;
+     * height: 100%;
+     * background: blue;
+     * top: 0;
+     * left: 0;
+     */
+}
     body{
         font-family: Quicksand;
     }
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index 8686ae6..8956f26 100644
--- a/src/pages/cross/v2.astro
+++ b/src/pages/cross/v2.astro
@@ -222,6 +222,41 @@ import Layout from "../../layouts/Layout.astro";
 </script>
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
+    input[type="checkbox"]{
+        -webkit-appearance: initial;
+        appearance: initial;
+        border: 1px solid gray;
+        border-radius: 5px;
+        /* background: gray; */
+        width: 40px;
+        height: 40px;
+        
+        position: relative;
+    }
+    input[type="checkbox"]:checked {
+        background: blue;
+    }
+    input[type="checkbox"]:checked:after {
+        border: none;
+        content: "X";
+        color: #fff;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        -moz-transform: translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        /*
+        * If you want to fully change the check appearance, use the following:
+        * content: " ";
+        * width: 100%;
+        * height: 100%;
+        * background: blue;
+        * top: 0;
+        * left: 0;
+        */
+    }
     body{
         font-family: Quicksand;
     }