Use pure CSS to achieve switch effect

First is the idea

We use the <input type="checkbox"> tag to achieve this effect.

The checked and unchecked properties of a checkbox correspond exactly to the on and off properties of a switch.

on: turn on off: turn off

<label for="ck2">
  <input type="checkbox" id="ck2">
  <span>If not selected, turn off the switch</span>
</label>
<br>
<label for="ck1">
  <input type="checkbox" id="ck1" checked>
  <span>If selected, turn on the switch</span>
</label>

Start sketching the off and on states

Here I want to explain that positioning is achieved using position. If you don’t understand, you can open MDN to view relevant knowledge.

<P>off state sketch</P>
<div class="toggle">
  <div class="cookie"></div>
</div>
<br>
<P>on state sketch</P>
<div class="toggle2">
  <div class="cookie2"></div>
</div>
.toggle{
  display:inline-block;
  position:relative;
  height:25px;
  width:50px;  
  border-radius:4px;
  background:#CC0000;
}
.cookie{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}
.toggle2{
  display:inline-block;
  position:relative;
  height:25px;
  width:50px; 
  padding:2px;
  border-radius:4px;
  background:#66CC33;  
}
.cookie2{
  position:absolute;
  right:2px;
  top:2px;
  bottom:2px;  
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}

Then we put these two sketches into the label

<label for="ck4">
  <input type="checkbox" id="ck4">
  <div class="toggle">
    <div class="cookie"></div>
  </div>
</label>
<br>
<label for="ck3">
  <input type="checkbox" id="ck3" checked>
  <div class="toggle2">
    <div class="cookie2"></div>
  </div>
</label>

Combine label and checkbox to organize and optimize CSS

<label for="ck5">
  <input type="checkbox" id="ck5">
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
<br>
<label for="ck6">
  <input type="checkbox" id="ck6" checked>
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
.toggle-finish{
  cursor:pointer;
  display:inline-block;
  position:relative;
  height:25px;
  width:50px;  
  border-radius:4px;
  background:#CC0000;
}
.cookie-finish{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}
input:checked + .toggle-finish{
  background:#66CC33;  
}
input:checked + .toggle-finish .cookie-finish{ 
  left:auto;
  right:2px;
}

So far, the function of a switch has been basically realized. Remember to hide the input.

You can click to preview https://codepen.io/Ritr/pen/W...

In addition, I also optimized an animated version

https://codepen.io/Ritr/pen/L...

Summarize

The above is what I introduced to you about using pure CSS to achieve the switch effect. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Docker uses Git to implement the detailed process of Jenkins release and test projects

>>: 10 content-related principles to improve website performance