使用純css實現開關效果

2024-07-11 09:00:07

字體：大中小

來源：轉載

供稿：網友

首先是構思

我們使用<input type="checkbox">標簽來實現這個效果。

checkbox的選中、未選中的特性，剛好對應開關的打開、關閉

on:打開 off:關閉

<label for="ck2">  <input type="checkbox" id="ck2">  <span>未選中，則關閉開關</span></label><br><label for="ck1">  <input type="checkbox" id="ck1" checked>  <span>選中，則打開開關</span></label>

開始畫出off、on狀態的草圖

這里要講解一下，使用了position來實現的定位。有不了解的同學可以打開MDN查看相關知識

<P>off狀態草圖</P><div class="toggle">  <div class="cookie"></div></div><br><P>on狀態草圖</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;}

然后我們將這兩個草圖放到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>

結合label和checkbox整理、優化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;}