Revised creating a switch in HTML and CSS again

blog-posts/creatingaswitch.md

@@ -1,11 +1,11 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            1  
                                            ---
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            title: Creating a Switch in HTML and CSS
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            date: 2022 Feb 11
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 -
                                        updated: 2023 Feb 1
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                        updated: 2023 Feb 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                            ---
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 -
                                        A switch is something that is basically just a nicer checkbox. Here, I'll be showing you how to make one.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                        A switch is something that is basically just a nicer looking checkbox. Here, I'll be showing you how to make one.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 -
                                        The first step is to create checkbox with any classname; I'll be using `switch`.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                        The first step is to create checkbox with any class; I'll be using `switch`, because it's a switch.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            ```html
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -15,6 +15,7 @@ The first step is to create checkbox with any classname; I'll be using `switch`.

                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                            Next step is to add an appearance of none to the CSS--make sure to add `-moz-` and `-webkit-`. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in `px`. We also want to set the position to relative
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                            ```html
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                            <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                                input[type=checkbox].switch {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -27,7 +28,7 @@ Next step is to add an appearance of none to the CSS--make sure to add `-moz-` a

                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                            <input type="checkbox" class="switch" />
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            30  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 -
                                        Next we want to create `::before` pseudo. In there we want to make it have a position of relative, a width and height that are abit less than the height of the main switch, a display of inline-block, a top and left of 0, a content of anything, color of transparent, and a background color that's different from the one in the main switch.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                        Next we want to create `::before` pseudo. In there we want to make it have a position of relative, a width and height that are `-1px` less than the height of the main switch, a display of block, top and left set to `1px`, a content of `""`, and a background color that's different from the one in the main switch.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            32  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            33  
                                            ```html
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            34  
                                            <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -47,7 +48,6 @@ Next we want to create `::before` pseudo. In there we want to make it have a pos

                                
                                
                                
                            
                                
                                    
                                        
                                            48  
                                                    display: block;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                                    background: red;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                                    content: "";
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 -
                                                color: transparent;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                                    width: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                                    height: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            53  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -55,7 +55,7 @@ Next we want to create `::before` pseudo. In there we want to make it have a pos

                                
                                
                                
                            
                                
                                    
                                        
                                            55  
                                            <input type="checkbox" class="switch" />
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 -
                                        Finally add a pseudo called `:checked` which checks if a checkbox, or a radio, was checked; you'll want to change the before pseudo if the the checkbox is checked. You need to set the left to a bit less than the width of the checkbox; you can adjust it until it looks right to you.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 +
                                        Finally add a pseudo called `:checked` which checks if a checkbox was checked, you'll want to change the before pseudo if the the checkbox is checked. You'll need to put it on the opposite side of where it started, for me, that's on the right-side.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            59  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            60  
                                            ```html
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            61  
                                            <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -75,19 +75,53 @@ Finally add a pseudo called `:checked` which checks if a checkbox, or a radio, w

                                
                                
                                
                            
                                
                                    
                                        
                                            75  
                                                    display: block;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            76  
                                                    background: red;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            77  
                                                    content: "";
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 -
                                                color: transparent;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            78  
                                                    width: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            79  
                                                    height: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            80  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            81  
                                                input[type=checkbox].switch:checked::before {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        83 -
                                                left: unset !important;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        84 -
                                                right: 1px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        82 +
                                                left: 15px; /* .switch width - .switch::before width - 1px */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        83 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        84 +
                                        </style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        85 +
                                        <input type="checkbox" class="switch" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        86 +
                                        ```
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        87 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        88 +
                                        I'm using the `left` property instead of the `right` property as it makes it easier to transition between the 2 positions. Here is the CSS with the transition added in, plus a background change(also dark mode):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        89 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        90 +
                                        ```html
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 +
                                        <style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 +
                                            :root {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 +
                                                background: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 +
                                                color: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        95 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        96 +
                                            input[type=checkbox].switch {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        97 +
                                                -webkit-appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        98 +
                                                -moz-appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        99 +
                                                appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        100 +
                                                position: relative;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        101 +
                                                background: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        102 +
                                                width: 30px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        103 +
                                                height: 16px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        104 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        105 +
                                            input[type=checkbox].switch::before {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        106 +
                                                top: 1px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        107 +
                                                left: 1px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        108 +
                                                position: absolute;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        109 +
                                                display: block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        110 +
                                                background-color: #ff5c1c;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        111 +
                                                content: "";
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        112 +
                                                width: 14px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        113 +
                                                height: 14px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        114 +
                                                transition: background-color .5s, left .5s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        115 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        116 +
                                            input[type=checkbox].switch:checked::before {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        117 +
                                                left: 15px; /* .switch width - .switch::before width - 1px */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        118 +
                                                background-color: #3f9b00;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            119  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            120  
                                            </style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            121  
                                            <input type="checkbox" class="switch" />
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            122  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            123  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        90 -
                                        Now, let's look at what it looks like:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        124 +
                                        All of this results in a final product that looks like:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            125  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            126  
                                            <iframe style="background: #fff; border: none" src="/blog-files/switch-final.html"></iframe>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            127  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/blog-files/switch-final.html

@@ -1,14 +1,18 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            1  
                                            <!DOCTYPE html>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            <html>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 -
                                        <body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                        <head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                                <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                :root {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                    background: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                    color: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                                }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                                    input[type=checkbox].switch {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                                        -webkit-appearance: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                                        -moz-appearance: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                        appearance: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                        position: relative;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 -
                                                    background: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                                    background: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                        width: 30px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                                        height: 16px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -17,17 +21,20 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                                        left: 1px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                                        position: absolute;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                                        display: block;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 -
                                                    background: red;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                    background-color: #ff5c1c;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                        content: "";
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 -
                                                    color: transparent;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                        width: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            27  
                                                        height: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                    transition: background-color .5s, left .5s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            30  
                                                    input[type=checkbox].switch:checked::before {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 -
                                                    left: unset !important;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 -
                                                    right: 1px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                                    left: 15px; /* .switch width - .switch::before width - 1px */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                    background-color: #3f9b00;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            33  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            34  
                                                </style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                        </head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                        <body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                                <input type="checkbox" class="switch" />
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            39  
                                            </body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            40  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/blog-files/switch-final.txt

@@ -1,32 +1,40 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            1  
                                            <!DOCTYPE html>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            <html>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 -
                                        <body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                        <head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                                <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                :root {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                    background: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                    color: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                                }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                                    input[type=checkbox].switch {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                                        -webkit-appearance: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                                        -moz-appearance: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                        appearance: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                        position: relative;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                                    background: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                        width: 30px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                                        height: 16px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                                    input[type=checkbox].switch::before {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                                        top: 1px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                                        left: 1px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 -
                                                    position: relative;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                    position: absolute;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                                        display: block;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 -
                                                    background: red;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                    background-color: #ff5c1c;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                        content: "";
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 -
                                                    color: transparent;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                        width: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            27  
                                                        height: 14px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                    transition: background-color .5s, left .5s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            30  
                                                    input[type=checkbox].switch:checked::before {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 -
                                                    left: unset;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 -
                                                    right: 1px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                                    left: 15px; /* .switch width - .switch::before width - 1px */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                    background-color: #3f9b00;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            33  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            34  
                                                </style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                        </head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                        <body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                                <input type="checkbox" class="switch" />
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            39  
                                            </body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            40