CSS開關按鈕三例

咱們將使用純CSS打造一些切換開關並使其擁有相似於checkbox的用戶體驗。

不少時候咱們都須要用戶經過勾選/取消checkbox來代表他們對一些問題的答案。咱們設置了一個標籤，一個checkbox，並在提交表單後獲取checkbox值，以查看用戶是否已經選中或取消選中該checkbox。咱們都知道默認的的checkbox長啥樣，並且還不能經過純CSS的方式來設置checkbox的樣式。這種元素的樣式由每一個瀏覽器引擎單獨管理（每一個瀏覽器下面checkbox的樣式均可能不同）。因而，有一個更統一的界面豈不是會更好？

不要急！一個小小的CSS技巧能夠幫助咱們解決這個問題。經過將:checkded, :before和:after僞類結合到咱們的checkbox上，咱們能夠實現一些漂亮並擁有平滑過渡效果的切換型開關。沒有黑魔法...僅僅是CSS的魅力。下面讓咱們開始吧。

HTML

須要用到的HTML並非咱們以前沒見過的，也就是一個標準的checkbox結合一個label。咱們用一個div將checkox和label包裹起來，並給這個div添加了一個switch的樣式類。

label的樣式則會使用input + label選擇器來定位，那樣label就不須要本身的樣式類名了。如今讓咱們來看下下面的HTML結構：

<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

<div class="switch">
  <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
  <label for="cmn-toggle-4"></label>
</div>

<div class="switch">
  <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  <label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
</div>複製代碼

這裏沒什麼特別的。對於CSS,咱們但願真實的checkbox被隱藏在屏幕和視線以外。基本上全部的樣式都被加在label上。這樣作很方便，由於點擊label實際上會勾選/取消勾選checkbox。咱們將用下面的CSS來實現切換開關：

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}複製代碼

樣式一

此時label充當容器的角色，並擁有寬和高。咱們還給它設置了一個背景顏色來模擬咱們的切換開關的邊界。:before元素模擬開關內部的淺灰色區域（開關打開時背景顏色會過渡到綠色）。:after元素纔是真正的圓形開關，它的層級高於一切，在點擊時的時候它將從左滑動到右。咱們將給:after元素添加一個box-shadow使它看起來更加立體。當input接受:checked僞類時，咱們將平滑的改變:before元素的背景顏色和:after元素的位置。CSS以下：

input.cmn-toggle-round + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 58px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 60px;
}複製代碼

樣式二

接下來的這個例子和上面的例子很是類似，主要的區別在於它的外觀表現。它符合現代網站平滑扁平化趨勢，可是就功能而言和例1同樣。下面的CSS僅僅改變了toggle的表現風格，其餘的都是同樣的。

input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 52px;
  background-color: #dddddd;
  border-radius: 52px;
  transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 60px;
  background-color: #8ce196;
}複製代碼

樣式三

如今，咱們要作一點不同的事了。咱們將會建立一個翻轉風格的switcher開關。默認視圖爲灰色，並顯示「No」（或任何表示未選中的內容），勾選後的視圖則爲綠色，並顯示「Yes」。當點擊label時，swithcer會沿Y軸翻轉180度。咱們將使用「data-attributes」來填充未選中/已選中時內容。這些「data-attributes」在HTML中由「data-on」和「data-off」指定，他們將分別填充到:after和:before兩個僞元素中。請注意:after僞元素中的backface-visiibility屬性，因爲起點是-180度，經過這個屬性能夠隱藏背面的內容。

input.cmn-toggle-yes-no + label {
  padding: 2px;
  width: 120px;
  height: 60px;
}
input.cmn-toggle-yes-no + label:before,
input.cmn-toggle-yes-no + label:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
input.cmn-toggle-yes-no + label:before {
  background-color: #dddddd;
  content: attr(data-off);
  transition: transform 0.5s;
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label:after {
  background-color: #8ce196;
  content: attr(data-on);
  transition: transform 0.5s;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label:before {
  transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
  transform: rotateY(0);
}複製代碼

瀏覽器兼容性

上面的這些在瀏覽器兼容方面的要求是，IE8及如下的瀏覽器不能識別:checked僞類，所以你須要檢測瀏覽器，若是是老舊的IE，則直接回退到原始的checkbox，css transitions 屬性不支持IE9及如下瀏覽器，但這僅僅會影響切換過程當中的過渡部分，除此以外沒有其餘毛病可以正常工做。

總結

這是一個關於一些很好的CSS切換開關示例！這種技術使得一切徹底複合語義，不會增長任何瘋狂的標記，而且用純CSS就能夠完成。固然，你須要注意瀏覽器兼容性狀況，可是你可使用條件樣式來兼容舊版瀏覽器，使用上面提到的例子，並不會產生什麼不足之處。