【前端幫幫忙】第4期 使用純CSS製做一個開關按鈕

前言

開關組件是咱們在移動端頁面很經常使用的一個組件，特別是在一些設置頁面。

正文

咱們打開手機，進入設置，隨便打開一個頁面，都能看到使用了不少的開關組件，如圖：

今天咱們就用純CSS來實現這樣一個組件。

首先，咱們先分析一下原理，其實就是使用<label>標籤配合<input type=checkbox />複選框來實現的，label的for屬性會間接觸發checkbox的點擊切換，從而動態更改開關的樣式。

首先定義咱們的HTML結構

<div class="switch-box""> <input class="switch-input" type="checkbox" id="switch-input"> <label class="switch-label" for="switch-input"></label> </div> 複製代碼

外層用一個div把checkbox和label包裹起來，接下來咱們把checkbox標籤隱藏起來，而後開關的樣式都寫在label標籤上。

外圍容器div的樣式

.switch-box {
  position: relative;
  display: inline-block;
  height: 30px;
}
複製代碼

checkbox標籤的樣式

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
複製代碼

而後是開關默認的樣式（也就是關閉時候的樣式）

.switch-label {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  background-color: #e3e3e3;
  border-radius: 20px;
}
複製代碼

裏面的小圓須要配合僞元素:after或:before來實現

.switch-label:after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  content: "";
}
複製代碼

來看下如今的效果

而後咱們怎麼使開關切換到打開的狀態呢？上面說過了，checkbox的:checked結合~兄弟元素選擇器來實現，代碼以下：

.switch-input:checked ~ .switch-label {
  background-color: #05abc1;
}

.switch-input:checked ~ .switch-label:after {
  left: 33px;
}
複製代碼

好了，咱們來看下實際效果：

能夠看到切換效果有點生硬，咱們給它加上點緩動的效果，體驗更好，給.switch-label和它的僞元素:after都加上transition屬性，代碼以下

transition: .3s;
複製代碼

再來看下效果

這樣一個開關，咱們就實現了，仍是比較簡單的。

拓展

假如，有一天產品經理或設計師過來跟咱們說，要在開關的旁邊加上文字提示，咱們怎麼作？好比這種

其實要實現這個功能，也不難，咱們再定一個<span>標籤，用來放文字提示，放到容器裏，代碼以下

<span class="switch-txt" data-open-txt="已啓用" data-close-txt="已禁用"></span>
複製代碼

這邊使用了data-來自定義咱們的屬性，給其加點樣式

.switch-txt {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

.switch-txt:after {
  content: attr(data-close-txt);
}
複製代碼

上面代碼說明，咱們開關的默認狀態是關閉的狀態，這邊也是使用了僞元素來定義開關默認的文字提示，經過content: attr(自定義屬性名)就能夠獲取到自定義屬性的值，真的是很方便。來看下如今的效果

能夠看到，咱們的文字提示已經顯示出來了，最後咱們只要開關切換到開啓狀態改變下文字就能夠了，也是經過checkbox的:checked來實現，代碼以下

.switch-input:checked ~ .switch-txt:after {
  content: attr(data-open-txt);
}
複製代碼

最後，來看下最終效果

總結

1. checkbox:checked選中後更改label的樣式
2. transition爲其加上緩動效果
3. 經過data-自定義文本提示，僞元素裏經過content: attr(自定義屬性名)來獲取文本值

最後

感謝耐心讀完，若是還有什麼疑問或者建議，能夠多多交流。

好了，本文到此結束，但願對你有幫助 :)

原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

關注

本文章首發在個人公衆號「前端幫幫忙」，感謝關注，你們一塊兒學習進步！