CSS開關(guān)按鈕樣式詳解
我要評論我們將使用純CSS打造一些切換開關(guān)并使其擁有類似于checkbox的用戶體驗。
很多時候我們都需要用戶通過勾選/取消checkbox來表明他們對一些問題的答案。我們設(shè)置了一個標簽，一個checkbox，并在提交表單后獲取checkbox值，以查看用戶是否已經(jīng)選中或取消選中該checkbox。我們都知道默認的的checkbox長啥樣，而且還不能通過純CSS的方式來設(shè)置checkbox的樣式。這種元素的樣式由每個瀏覽器引擎單獨管理（每個瀏覽器下面checkbox的樣式都可能不一樣）。于是，有一個更統(tǒng)一的界面豈不是會更好？
不要急！一個小小的CSS技巧可以幫助我們解決這個問題。通過將:checkded, :before和:after偽類結(jié)合到我們的checkbox上，我們可以實現(xiàn)一些漂亮并擁有平滑過渡效果的切換型開關(guān)。沒有黑魔法...僅僅是CSS的魅力。下面讓我們開始吧。
HTML
需要用到的HTML并不是我們之前沒見過的，也就是一個標準的checkbox結(jié)合一個label。我們用一個div將checkox和label包裹起來，并給這個div添加了一個switch的樣式類。
label的樣式則會使用input + label選擇器來定位，那樣label就不需要自己的樣式類名了。現(xiàn)在讓我們來看下下面的HTML結(jié)構(gòu)：
<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被隱藏在屏幕和視線之外?；旧纤械臉邮蕉急患釉趌abel上。這樣做很方便，因為點擊label實際上會勾選/取消勾選checkbox。我們將用下面的CSS來實現(xiàn)切換開關(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;
}
樣式一
此時label充當容器的角色，并擁有寬和高。我們還給它設(shè)置了一個背景顏色來模擬我們的切換開關(guān)的邊界。:before元素模擬開關(guān)內(nèi)部的淺灰色區(qū)域（開關(guān)打開時背景顏色會過渡到綠色）。:after元素才是真正的圓形開關(guān)，它的層級高于一切，在點擊時的時候它將從左滑動到右。我們將給: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;
}
樣式二
接下來的這個例子和上面的例子非常相似，主要的區(qū)別在于它的外觀表現(xiàn)。它符合現(xiàn)代網(wǎng)站平滑扁平化趨勢，但是就功能而言和例1一樣。下面的CSS僅僅改變了toggle的表現(xiàn)風(fēng)格，其他的都是一樣的。
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;
}
樣式三
現(xiàn)在，我們要做一點不一樣的事了。我們將會創(chuàng)建一個翻轉(zhuǎn)風(fēng)格的switcher開關(guān)。默認視圖為灰色，并顯示“No”（或任何表示未選中的內(nèi)容），勾選后的視圖則為綠色，并顯示“Yes”。當點擊label時，swithcer會沿Y軸翻轉(zhuǎn)180度。我們將使用“data-attributes”來填充未選中/已選中時內(nèi)容。這些“data-attributes”在HTML中由“data-on”和“data-off”指定，他們將分別填充到:after和:before兩個偽元素中。請注意:after偽元素中的backface-visiibility屬性，由于起點是-180度，通過這個屬性可以隱藏背面的內(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: #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及以下瀏覽器，但這僅僅會影響切換過程中的過渡部分，除此之外沒有其他毛病能夠正常工作。
總結(jié)
這是一個關(guān)于一些很好的CSS切換開關(guān)示例！這種技術(shù)使得一切完全復(fù)合語義，不會增加任何瘋狂的標記，并且用純CSS就可以完成。當然，你需要注意瀏覽器兼容性情況，但是你可以使用條件樣式來兼容舊版瀏覽器，使用上面提到的例子，并不會產(chǎn)生什么不足之處。
以上所述是小編給大家介紹的CSS開關(guān)按鈕樣式詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
純CSS3實現(xiàn)的炫酷checkbox復(fù)選框美化庫checkboxes.css(含開關(guān)按鈕美化
checkboxes.css是一款純CSS3炫酷checkbox復(fù)選框美化庫。checkboxes.css可以通過在HTML代碼中簡單的class配置，生成多種不同效果的checkbox美化樣式，其中包括復(fù)選框按鈕美2017-09-05
這篇文章主要介紹了CSS仿蘋果平滑開關(guān)按鈕效果,本文通過實例代碼給大家介紹的非常想詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-25
