From 0ef1eea4cd5db51d62474294d3797e02e62cb8e7 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Wed, 8 Sep 2021 14:05:57 -0400
Subject: [PATCH] radio icon styles

---
 index.html | 50 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 02ba654..58a7a7d 100644
--- a/index.html
+++ b/index.html
@@ -23,29 +23,73 @@
         {
             width:100%;
         }
+        label
+        {
+            width:100%;
+        }
+        input[type='radio']
+        {
+            display:block;
+            position:relative;
+            appearance: none;
+        }
+        input[type='radio']::before
+        {
+            content: " ";
+            display: block;
+            position: relative;
+            width: 17px;
+            height: 17px;
+            border: 2px solid #000;
+            border-radius: 20px;
+        }
+        input[type='radio']:checked::after
+        {
+            content: " ";
+            display: block;
+            position: absolute;
+            width: 11px;
+            height: 11px;
+            top: 5px;
+            left: 5px;
+            border-radius: 20px;
+            background: #000;
+        } 
 
     </style>
 </head>
 <body>
     <form>
+
+        <div class="block">
+            <input id="check-1" type="radio" name="slot-1" value="option-1"/>
+            <label for="check-1">
+                <span class="text text--weight-bold text--size-normal">Credit Card</span>
+                <span class="text--two"></span>
+            </label>
+            <a class="style--axuillary" href="/">Change</a>
+        </div>
+
         <div class="block">
             <div class="icon--radio"></div>
             <div class="style--wide">
-                <label for="check-1">Credit Card <input  id="check-1" type="radio" name="slot-1" value="option-1"/></label>
+                <label for="check-2">Credit Card <input  id="check-2" type="radio" name="slot-1" value="option-2"/></label>
                 <br>
                 <span>Check it</span>
             </div>
             <a class="style--axuillary" href="/">Change</a>
         </div>
+
         <div class="block">
-            <input  id="check-2" type="radio" name="slot-1" value="option-2"/>
+            <input  id="check-3" type="radio" name="slot-1" value="option-3"/>
             <p style="width:100%;">
-                <label for="check-2">Credit Card</label>
+                <label for="check-3">Credit Card</label>
                 <br>
                 <span>Check it</span>
             </p>
             <a class="" href="/">Change</a>
         </div>
+
     </form>
 </body>
 </html>
\ No newline at end of file
