CSS Styling for Switches instead of Checkboxes

2024-07-25 12:34:53 -07:00 · 2024-07-25 12:34:53 -07:00 · 9e00d551cc
commit 9e00d551cc
parent 284b419606
1 changed files with 76 additions and 0 deletions
--- a/custom-switches.html
+++ b/custom-switches.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Custom Switch</title>
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <h1>Custom Switch</h1>
+  <p>This is project demonstrating turning a checkbox into a switch.</p>
+  <br>
+  <div class="switch-container">
+    <h2>Basic Checkbox</h2>
+    <label>
+      <input type="checkbox" id="switch-1">
+      Basic Checkbox with no styling
+    </label>
+    <h2>Custom Switch</h2>
+    <label>
+      <input type="checkbox" id="switch-2">
+      A Checkbox to look like a switch using CSS
+    </label>
+  </div>
+</div>
+<style>
+
+  #switch-2{
+    appearance: none;
+    position: relative;
+    display: inline-block;
+    background: lightgray;
+    height: 1.65rem;
+    width: 2.75rem;
+    vertical-align: middle;
+    border-radius: 2rem;
+    box-shadow: 0px 1px 3px #0003 inset;
+    transition: 0.25s linear background;
+  }
+
+  #switch-2::before {
+    content: '';
+    display: block;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: #fff;
+    border-radius: 1.2rem;
+    position: absolute;
+    top: 0.2rem;
+    left: 0.2rem;
+    box-shadow: 0px 1px 3px #0003;
+    transition: 0.25s linear transform;
+    transform: translateX(0rem);
+  }
+
+  #switch-2:checked {
+    background: green;
+  }
+
+  #switch-2:checked::before {
+    transform: translateX(1rem);
+  }
+</style>
+
+</body>
+</html>