如何使用CSS實現開關按鈕

這篇文章給大家分享的是有關如何使用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實現開關按鈕”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！