Implement sliding switch with pure CSS3

Implement sliding switch with pure CSS3

The implementation result is as follows:

 

 

HTML Structure Code:

CSS code:

/* Form switch style */ . Ui-switch { Position: absolute; Font-size:. 16rem; Right: 0.07rem; Top: 50%; Margin-top:-0.16rem; Width:. 7rem; Height:. 3rem; Line-height:. 3rem; } . Ui-switch input { Width:. 7rem; Height:. 3rem; Position: absolute; Top: 0; left: 0; Z-index: 2; Border: 0; Background: 0 0; -Webkit-appearance: none; Outline: 0 } . Ui-switch input: before { Content :''; Width:. 68rem; Height:. 3rem; Border: 1px solid # dfdfdf; Background-color: # fdfdfd; Border-radius:. 2rem; Cursor: pointer; Display: inline-block; Position: relative; Vertical-align: middle; -Webkit-box-sizing: content-box; Box-sizing: content-box; Border-color: # dfdfdf; -Webkit-box-shadow: # dfdfdf 0 0 0 inset; Box-shadow: # dfdfdf 0 0 0 0 inset; -Webkit-transition: border. 4 s,-webkit-box-shadow. 4 s; Transition: border. 4 s, box-shadow. 4 s; -Webkit-background-clip: content-box; Background-clip: content-box } . Ui-switch input: checked: before { Border-color: #64bd63; -Webkit-box-shadow: #64bd63 0 0 0 0.16rem inset; Box-shadow: #64bd63 0 0 0 0.16rem inset; Background-color: #64bd63; Transition: border. 4 s, box-shadow. 4 s, background-color 1.2 s; -Webkit-transition: border. 4 s,-webkit-box-shadow. 4 s, background-color 1.2 s; Background-color: #64bd63 } . Ui-switch input: checked: after { Left:. 4rem } . Ui-switch input: after { Content :''; Width:. 3rem; Height:. 3rem; Position: absolute; Top: 50%; Left: 0; -Webkit-transform: translateY (-50% ); Border-radius: 100%; Background-color: # fff; -Webkit-box-shadow: 0 0.01rem 0.03rem rgba (0, 0,. 4 ); Box-shadow: 0 0.01rem 0.03rem rgba (0, 0,. 4 ); -Webkit-transition: left. 2 s; Transition: left. 2 s }