styling radio button

Adibab · Adibab · commit d3a2947c7198 · 2022-08-05T11:08:52.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -266,57 +266,58 @@ footer,P{
 
 
 /* custom radio button */
-
-
-[type="radio"]:checked,
-[type="radio"]:not(:checked) {
-    position: absolute;
-    left: -9999px;
+:root {
+  --form-control-color: #E0633A;;
 }
-[type="radio"]:checked + label,
-[type="radio"]:not(:checked) + label
-{
-    position: relative;
-    padding-left: 28px;
-    cursor: pointer;
-    line-height: 20px;
-    display: inline-block;
-    
+.radio-btn-grid{
+  display: grid;
+  grid-template-areas: "k s";
 }
-[type="radio"]:checked + label:before,
-[type="radio"]:not(:checked) + label:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 18px;
-    height: 18px;
-    border: 1px solid #ddd;
-    border-radius: 100%;
+
+.form-control1 {
+  font-family: system-ui, sans-serif;
+  font-size: 10px;
+  line-height: 1.1;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 1em;
 }
-[type="radio"]:checked + label:after,
-[type="radio"]:not(:checked) + label:after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    background:#E0633A;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    border-radius: 100%;
-    -webkit-transition: all 0.2s ease;
-    transition: all 0.2s ease;
+input[type="radio"] {
+  /* Add if not using autoprefixer */
+  -webkit-appearance: none;
+  /* Remove most all native input styles */
+  appearance: none;
+  /* For iOS < 15 */
+  background-color: var(--form-background);
+  /* Not removed via appearance */
+  margin: 0;
+
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 50%;
+  transform: translateY(-0.075em);
+
+  display: grid;
+  place-content: center;
 }
-[type="radio"]:not(:checked) + label:after {
-    opacity: 0;
-    -webkit-transform: scale(0);
-    transform: scale(0);
+input[type="radio"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--form-control-color);
+  /* Windows High Contrast Mode */
+  background-color: #E0633A;;
 }
-[type="radio"]:checked + label:after {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
+input[type="radio"]:checked::before {
+  transform: scale(1);
 }
+
 /* custom style for checkbox */
 
 .form-control {
diff --git a/store.html b/store.html
@@ -80,23 +80,33 @@ <h2> Order your Karma wifi
                     </fieldset>
                 </div>
 
-                <div class="form-group colour">
+                <div class="form-group colour ">
                     <fieldset>
                         <legend> Select a colour </legend>
+                        <section class="radio-btn-grid">
 
-                        <input id="karmaorange" type="radio" name="radio-group" checked value="" />
-                        <label for="karmaorange">Karma Orange</label>
 
-                        <input id="spacegrey" type="radio" name="size" value="" />
-                        <label for="spacegrey">Space Grey</label>
+                            <label for="karmaorange" class="form-control1">
+
+                                <input id="karmaorange" type="radio" name="radio-group" checked />
+                                Karma Orange
+                            </label>
+
+                            <label for="spacegrey" class="form-control1">
+                                <input id="spacegrey" type="radio" name="size" />
+
+                                Space Grey
+                            </label>
+                        </section>
                     </fieldset>
                 </div>
 
                 <div class="form-group agreement">
-                    
-                    <label class="form-control" for="agreemnet1"><input id="agreemnet1"  type="checkbox" name="checkbox" required /> By placing your order you agree to karma's Terms and
+
+                    <label class="form-control" for="agreemnet1"><input id="agreemnet1" type="checkbox" name="checkbox"
+                            required /> By placing your order you agree to karma's Terms and
                         conditions *
-                        
+
                     </label>
 
                 </div>
