摘要：我們將使用純打造一些切換開(kāi)關(guān)并使其擁有類(lèi)似于的用戶體驗(yàn)。總結(jié)這是一個(gè)關(guān)于一些很好的切換開(kāi)關(guān)示例這種技術(shù)使得一切完全復(fù)合語(yǔ)義，不會(huì)增加任何瘋狂的標(biāo)記，并且用純就可以完成。獲取開(kāi)關(guān)按鈕代碼可以

我們將使用純CSS打造一些切換開(kāi)關(guān)并使其擁有類(lèi)似于checkbox的用戶體驗(yàn)。

很多時(shí)候我們都需要用戶通過(guò)勾選/取消checkbox來(lái)表明他們對(duì)一些問(wèn)題的答案。我們?cè)O(shè)置了一個(gè)標(biāo)簽，一個(gè)checkbox，并在提交表單后獲取checkbox值，以查看用戶是否已經(jīng)選中或取消選中該checkbox。我們都知道默認(rèn)的的checkbox長(zhǎng)啥樣，而且還不能通過(guò)純CSS的方式來(lái)設(shè)置checkbox的樣式。這種元素的樣式由每個(gè)瀏覽器引擎多帶帶管理（每個(gè)瀏覽器下面checkbox的樣式都可能不一樣）。于是，有一個(gè)更統(tǒng)一的界面豈不是會(huì)更好？

不要急！一個(gè)小小的CSS技巧可以幫助我們解決這個(gè)問(wèn)題。通過(guò)將:checkded, :before和:after偽類(lèi)結(jié)合到我們的checkbox上，我們可以實(shí)現(xiàn)一些漂亮并擁有平滑過(guò)渡效果的切換型開(kāi)關(guān)。沒(méi)有黑魔法...僅僅是CSS的魅力。下面讓我們開(kāi)始吧。

需要用到的HTML并不是我們之前沒(méi)見(jiàn)過(guò)的，也就是一個(gè)標(biāo)準(zhǔn)的checkbox結(jié)合一個(gè)label。我們用一個(gè)div將checkox和label包裹起來(lái)，并給這個(gè)div添加了一個(gè)switch的樣式類(lèi)。

label的樣式則會(huì)使用input + label選擇器來(lái)定位，那樣label就不需要自己的樣式類(lèi)名了?，F(xiàn)在讓我們來(lái)看下下面的HTML結(jié)構(gòu)：

這里沒(méi)什么特別的。對(duì)于CSS,我們希望真實(shí)的checkbox被隱藏在屏幕和視線之外?；旧纤械臉邮蕉急患釉趌abel上。這樣做很方便，因?yàn)辄c(diǎn)擊label實(shí)際上會(huì)勾選/取消勾選checkbox。我們將用下面的CSS來(lái)實(shí)現(xiàn)切換開(kāi)關(guān)：

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

此時(shí)label充當(dāng)容器的角色，并擁有寬和高。我們還給它設(shè)置了一個(gè)背景顏色來(lái)模擬我們的切換開(kāi)關(guān)的邊界。:before元素模擬開(kāi)關(guān)內(nèi)部的淺灰色區(qū)域（開(kāi)關(guān)打開(kāi)時(shí)背景顏色會(huì)過(guò)渡到綠色）。:after元素才是真正的圓形開(kāi)關(guān)，它的層級(jí)高于一切，在點(diǎn)擊時(shí)的時(shí)候它將從左滑動(dòng)到右。我們將給:after元素添加一個(gè)box-shadow使它看起來(lái)更加立體。當(dāng)input接受:checked偽類(lèi)時(shí)，我們將平滑的改變:before元素的背景顏色和:after元素的位置。CSS如下：

input.cmn-toggle-round + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #ffffdffffd;
  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;
}

接下來(lái)的這個(gè)例子和上面的例子非常相似，主要的區(qū)別在于它的外觀表現(xiàn)。它符合現(xiàn)代網(wǎng)站平滑扁平化趨勢(shì)，但是就功能而言和例1一樣。下面的CSS僅僅改變了toggle的表現(xiàn)風(fēng)格，其他的都是一樣的。

input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #ffffdffffd;
  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: #ffffdffffd;
  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;
}

現(xiàn)在，我們要做一點(diǎn)不一樣的事了。我們將會(huì)創(chuàng)建一個(gè)翻轉(zhuǎn)風(fēng)格的switcher開(kāi)關(guān)。默認(rèn)視圖為灰色，并顯示“No”（或任何表示未選中的內(nèi)容），勾選后的視圖則為綠色，并顯示“Yes”。當(dāng)點(diǎn)擊label時(shí)，swithcer會(huì)沿Y軸翻轉(zhuǎn)180度。我們將使用“data-attributes”來(lái)填充未選中/已選中時(shí)內(nèi)容。這些“data-attributes”在HTML中由“data-on”和“data-off”指定，他們將分別填充到:after和:before兩個(gè)偽元素中。請(qǐng)注意:after偽元素中的backface-visiibility屬性，由于起點(diǎn)是-180度，通過(guò)這個(gè)屬性可以隱藏背面的內(nèi)容。

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: #ffffdffffd;
  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及以下的瀏覽器不能識(shí)別:checked偽類(lèi)，因此你需要檢測(cè)瀏覽器，如果是老舊的IE，則直接回退到原始的checkbox，css transitions 屬性不支持IE9及以下瀏覽器，但這僅僅會(huì)影響切換過(guò)程中的過(guò)渡部分，除此之外沒(méi)有其他毛病能夠正常工作。

這是一個(gè)關(guān)于一些很好的CSS切換開(kāi)關(guān)示例！這種技術(shù)使得一切完全復(fù)合語(yǔ)義，不會(huì)增加任何瘋狂的標(biāo)記，并且用純CSS就可以完成。當(dāng)然，你需要注意瀏覽器兼容性情況，但是你可以使用條件樣式來(lái)兼容舊版瀏覽器，使用上面提到的例子，并不會(huì)產(chǎn)生什么不足之處。

獲取開(kāi)關(guān)按鈕代碼可以：