switch button

@@ -86,6 +86,19 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
     <input type="checkbox" id="switch1">
     <label for="switch1"></label>
 </div>
+<div class="switch">
+    <input type="checkbox" id="switch2" checked>
+    <label for="switch2"></label>
+</div>
+<div class="switch">
+    <input type="checkbox" id="switch3" disabled>
+    <label for="switch3"></label>
+</div>
+<div class="switch">
+    <input type="checkbox" id="switch4" checked disabled>
+    <label for="switch4"></label>
+</div>
+<br>
 
 
 

@@ -76,19 +76,44 @@
     display: inline-block;
     input {
         display: none;
+        &:checked ~ label {
+            border: 2px solid #4bd865;
+            box-shadow: inset 0 0 0 calc(19px) #4bd865;
+        }
+        &:checked ~ label:after {
+            left: calc(54px - 34px);
+            box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.2), 0 0 0 2px #4bd865;
+        }
+
+        &:disabled ~ label {
+            opacity: 0.6;
+        }
+        &:disabled:checked ~ label {
+            opacity: 0.6;
+        }
+
     }
     label {
         position: relative;
-        display: block;
+        display: inline-block;
         width: 54px;
         height: 34px;
         background-color: $white;
-        border: 1px solid #ddd;
+        border: 2px solid #ddd;
         border-radius: 99999px;
         transition: 0.3s;
 
         &:after {
             content: "";
+            position: absolute;
+            left: 0;
+            width: 30px;
+            height: 30px;
+            border: none;
+            border-radius: 50%;
+            background-color: $white;
+            box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.2), 0 0 0 2px #ddd;
+            transition: 0.3s;
         }
     }
 }