From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/easy-toggle-switches/index.html | 149 +++++++++++++++++++++------------- 1 file changed, 92 insertions(+), 57 deletions(-) (limited to 'build/easy-toggle-switches') diff --git a/build/easy-toggle-switches/index.html b/build/easy-toggle-switches/index.html index 5120d90..b84f921 100644 --- a/build/easy-toggle-switches/index.html +++ b/build/easy-toggle-switches/index.html @@ -1,49 +1,65 @@ - + Easy Toggle Switches - - + + +
-

Easy Toggle Switches

+

Easy Toggle Switches

+

2019-02-18

+

Sometimes there is a need to use toggle elements in-place of the default checkbox inputs. The problem is, I tend to see a lot of developers reaching for plugins or JavaScript components in order to implement these toggles.

+

This is overkill. You can create your own custom input elements to mimic toggles perfectly with just a small amount of CSS.

-

What we will be building

+ +

What we will be building

+

Easy toggle switches

+

Live CodePen Example

-

The HTML

+ +

The HTML

+

The build structure for these toggles is really simple, we only need:

+ -
/* Main toggle parent container */
-<div class="toggle-switch">
-    /* Checkbox input, hidden with CSS */
-    <input class="toggle-input" type="checkbox" id="toggle-1">
-    /* The toggle slider element */
-    <label class="toggle-slider" for="toggle-1"></label>
-    /* The text label to the right of the slider */
-    <label class="toggle-label" for="toggle-1">Toggle Switch</label>
-</div>
-
-

And that's everything we need for the HTML.

-

ProTip: Don't forget to increment both the id and for attributes when adding additional toggles. This seems like a no-brainer but it's overlooked more than you think.

-

The CSS

+ +

And that’s everything we need for the HTML.

+ +

ProTip: Don’t forget to increment both the id and for attributes when adding additional toggles. This seems like a no-brainer but it’s overlooked more than you think.

+ +

The CSS

+

To get things started we will add the styling to the .toggle-switch item directly (using flexbox in this demo for easier layout).

-

Sidenote: You will notice the inclusion of CSS variables in this demo - if you are unfamiliar with how to use root variables in CSS, take a look at one of my previous posts: CSS variables.

+ +

Sidenote: You will notice the inclusion of CSS variables in this demo - if you are unfamiliar with how to use root variables in CSS, take a look at one of my previous posts: CSS variables.

+ 
:root {
     --primary-color: #4A90E2;
 }
@@ -56,14 +72,18 @@
     margin: 20px 0;
 }
-

Next we will hide the default browser checkbox element since we won't be needing it:

+ +

Next we will hide the default browser checkbox element since we won’t be needing it:

+ 
.toggle-input {
     position: absolute;
     visibility: hidden;
     z-index: -1;
 }
-

Let's also add some base styling for the label containing the text corresponding to it's input sibling:

+ +

Let’s also add some base styling for the label containing the text corresponding to it’s input sibling:

+ 
.toggle-label {
     color: #ccc;
     cursor: pointer;
@@ -73,8 +93,10 @@
     transition: ease all .3s;
 }
+

Now we target the .toggle-slider label and add the styling for the main slider base:

-
/* This is just the main slider base */
+
+
/* This is just the main slider base */
 .toggle-slider {
     background: #eee;
     border-radius: 9999px;
@@ -89,13 +111,15 @@
     width: 40px;
 }
 

+
 
We could include a separate element for the circle toggle switcher itself, but instead we will use the :before pseudo element:

+
 
.toggle-slider:before {
     background: white;
     border-radius: 9999px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1), 
                 0 2px 4px rgba(0,0,0,0.2);
-    content:'';
+    content:'';
     height: 16px;
     left: 2px;
     position: absolute;
@@ -104,13 +128,16 @@
     width: 16px;
 }
 

-
Interaction

-
Right now we just have a static toggle that does nothing when the user interacts with it. Let's change that by moving the pseudo element's position based on the checkbox input state and updating the label text color:

+
+
Interaction

+
+
Right now we just have a static toggle that does nothing when the user interacts with it. Let’s change that by moving the pseudo element’s position based on the checkbox input state and updating the label text color:

+
 
.toggle-input:checked + .toggle-slider {
     background: var(--primary-color);
 }
 .toggle-input:checked + .toggle-slider:before {
-    /* Move 100% of the width minus it's own width plus initial 'left' */
+    /* Move 100% of the width minus it's own width plus initial 'left' */
     left: calc(100% - 18px);
 }
 
@@ -118,32 +145,39 @@
     color: var(--primary-color);
 }
 

+
 
And because we already included the transition property on both the base slider and label text, everything animates nicely between state changes.

-
Final code

-
To make things easier, you can find the HTML & CSS is their entirety below:

-
HTML

-
<div class="toggle-switch">
-    <input class="toggle-input" type="checkbox" id="toggle-1">
-    <label class="toggle-slider" for="toggle-1"></label>
-    <label class="toggle-label" for="toggle-1">Toggle Switch</label>
-</div>
-<div class="toggle-switch">
-    <input class="toggle-input" type="checkbox" id="toggle-2">
-    <label class="toggle-slider" for="toggle-2"></label>
-    <label class="toggle-label" for="toggle-2">Toggle Switch</label>
-</div>
-<div class="toggle-switch">
-    <input class="toggle-input" type="checkbox" id="toggle-3" checked>
-    <label class="toggle-slider" for="toggle-3"></label>
-    <label class="toggle-label" for="toggle-3">Toggle Switch</label>
-</div>
-<div class="toggle-switch">
-    <input class="toggle-input" type="checkbox" id="toggle-4">
-    <label class="toggle-slider" for="toggle-4"></label>
-    <label class="toggle-label" for="toggle-4">Toggle Switch</label>
-</div>
+
+
Final code

+
+
To make things easier, you can find the HTML & CSS is their entirety below:

+
+
HTML

+
+
<div class="toggle-switch">
+    <input class="toggle-input" type="checkbox" id="toggle-1">
+    <label class="toggle-slider" for="toggle-1"></label>
+    <label class="toggle-label" for="toggle-1">Toggle Switch</label>
+</div>
+<div class="toggle-switch">
+    <input class="toggle-input" type="checkbox" id="toggle-2">
+    <label class="toggle-slider" for="toggle-2"></label>
+    <label class="toggle-label" for="toggle-2">Toggle Switch</label>
+</div>
+<div class="toggle-switch">
+    <input class="toggle-input" type="checkbox" id="toggle-3" checked>
+    <label class="toggle-slider" for="toggle-3"></label>
+    <label class="toggle-label" for="toggle-3">Toggle Switch</label>
+</div>
+<div class="toggle-switch">
+    <input class="toggle-input" type="checkbox" id="toggle-4">
+    <label class="toggle-slider" for="toggle-4"></label>
+    <label class="toggle-label" for="toggle-4">Toggle Switch</label>
+</div>
 

-
The CSS

+
+
The CSS

+
 
:root {
     --primary-color: #4A90E2;
 }
@@ -177,7 +211,7 @@
     border-radius: 9999px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1), 
                 0 2px 4px rgba(0,0,0,0.2);
-    content:'';
+    content:'';
     height: 16px;
     left: 2px;
     position: absolute;
@@ -203,6 +237,7 @@
     color: var(--primary-color);
 }
 

+
 
Enjoy your custom toggles!