On Many designs, like switches or radio, today I'll talk about how to use CSS to implement dynamic switches.
In the HTML code, it's very simple.
<input type= "checkbox" id= "1" class= "checkbox" ><label class= "switch" for= "1" ></label>
Below is our CSS code
<style>. checkbox {display:none; }. switch {width:50px; height:31px; Background: #56ACFE; border-radius:20px; padding:1px; Box-sizing:border-box; Display:inline-block; margin-top:15px; }. Switch:after {content: '; box-shadow:0 3px 8px 0 rgba (0,0,0,0.15), 0 1px 1px 0 rgba (0,0,0,0.16), 0 3px 1px 0 rgba (0,0,0,0.10); width:28px; height:28px; Background: #fff; border-radius:50%; Display:block; margin-left:1px; Float:left; Transition:all 0.5s; }. checkbox:checked+.switch:after {margin-left:20px; }. Checkbox:checked+.switch {background: #ccc; }</style>
In this way, the switch that often appears on the design and on the phone is realized.