CSS3 checkbox開關按鈕效果

admin發表於2018-08-11
CSSS3

分享一段程式碼例項，它實現了利用css3 將checkbox模擬為開關按鈕效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.switch>input {
  display: none;
}
.switch .switch-media {
  width: 40px;
  height: 25px;
  margin-right: 10px;
  padding: 5px 0;
}
.switch-media .switch-label {
  position: relative;
}
.switch-media .switch-label:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 22px;
  border: 2px solid #b9b9b9;
  border-radius: 10px;
}
.switch-media:hover .switch-label:after {
  border: 2px solid #009A61;
}
.switch-media .switch-label:before {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  top: 4px;
  left: 4px;
  background-color: #b9b9b9;
  border-color: #b9b9b9;
  border-radius: 50%;
  transition: .3s ease;
  box-shadow: 2px 2px 2px #EBEBEB;
}
.switch>input:checked+.switch-media .switch-label:after {
  border: 2px solid #009A61;
}
.switch>input:checked+.switch-media .switch-label:before {
  left: 21px;
  background-color: #009A61;
}
</style>
</head>
<body>
<div class="box">
  <label class="switch" for="switch1">
    <input type="checkbox" id="switch1" checked>
    <span class="switch-media">
      <span class="switch-label"></span>
    </span>
    <span>螞蟻部落一</span>
  </label>
  <label class="switch" for="switch2">
    <input type="checkbox"  id="switch2">
    <span class="switch-media">
      <span class="switch-label"></span>
    </span>
    <span>螞蟻部落二</span>
  </label>
</div>
</body>
</html>

上面程式碼實現了簡單的開關效果，下面介紹一下實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}

採用flex彈性佈局，內部專案在垂直軸上居中對齊。

彈性佈局可以將內部的專案轉換為塊級內聯元素特性，所以span元素就可以設定尺寸，也可以容納其他塊級元素或者塊級內聯元素。

[CSS] 純文字檢視 複製程式碼
.switch>input {
  display: none;
}

將input元素隱藏，在視覺上看不到核取方塊，但是依然可以實現它的選中和取消選中效果。

[CSS] 純文字檢視 複製程式碼
.switch .switch-media {
  width: 40px;
  height: 25px;
  margin-right: 10px;
  padding: 5px 0;
}

設定對應span元素的尺寸和內外邊距。

預設span元素無法設定尺寸和上下內外邊距（內聯元素的特性）；但是彈性佈局將其轉換為內聯塊級元素的特性。

[CSS] 純文字檢視 複製程式碼
.switch-media>.switch-label {
  position: relative;
}

將對應的span元素設定為相對定位，那麼它內部定位元素位移就以它為參考物件。

[CSS] 純文字檢視 複製程式碼
.switch-media .switch-label:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 22px;
  border: 2px solid #b9b9b9;
  border-radius: 10px;
}

通過偽元素選擇器，在尾部新增一個偽元素。

設定它的尺寸和定位方式。

這就是外部的帶有圓角效果的矩形框。

[CSS] 純文字檢視 複製程式碼
.switch-media:hover .switch-label:after {
  border: 2px solid #009A61;
}

滑鼠懸浮的時候，將圓角矩形框顏色設定為綠色。

[CSS] 純文字檢視 複製程式碼
.switch-media .switch-label:before {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  top: 4px;
  left: 4px;
  background-color: #b9b9b9;
  border-color: #b9b9b9;
  border-radius: 50%;
  transition: .3s ease;
  box-shadow: 2px 2px 2px #EBEBEB;
}

通過偽類選擇器，新增一個偽元素，就是內部圓形。

然後設定它的屬性改變是通過過渡方式實現的。

[CSS] 純文字檢視 複製程式碼
.switch>input:checked+.switch-media .switch-label:after {
  border: 2px solid #009A61;
}
.switch>input:checked+.switch-media .switch-label:before {
  left: 21px;
  background-color: #009A61;
}

當點選實現核取方塊選中，設定對應偽元素的樣式，實現開關開啟效果。

二.相關閱讀:

（1）.display: flex參閱display:flex彈性佈局一章節。

（2）.align-items參閱CSS3 align-items一章節。

（3）.相對定位參閱CSS position:relative 相對定位一章節。

（4）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（5）.:after參閱CSS E::after 偽物件選擇器一章節。

（6）.border-radius參閱CSS3 border-radius一章節。

（7）.transition參閱CSS3 transition一章節。

（8）.box-shadow參閱CSS3 box-shadow一章節。

（9）.<label>參閱HTML <label> 標籤一章節。

相關文章