MIUI選項框開關樣式模擬

有IOS的開關模擬，當然也有MIUI的開關模擬

看到設置選項裡面的開關樣式，突發奇想地來試試

最終效果如圖：

實現過程

1. 選項框checkbox 

模擬開關當然需要一個選項框，這裡用到了覆選框checkbox

2. 理解開關的過程

點擊開關按鈕，則開啟或關閉。原生的checkbox無法做到圖示的效果，所以就需要額外的元素來表示圖中的開關

而我們又要使用到checkbox的點擊效果以及點擊後是否選中（checked）的效果，所以checkbox不能隱藏，但可以用覆蓋的方式

為了減少多餘標簽的使用，可以使用偽元素:before、:after ，標簽結構為

　　<div class="switch-wrap">
        <span><span class="switch-action">開啟</span>WLAN</span>
        <label class="switch">
            <input type="checkbox" name="switch" id="switch">
        </label>
    </div>

3. 開關的實現

用:before偽元素作為開關背景層，用:after偽元素作為開關項（即那個小圓圈）

        .switch input:before {
            content: '';
            display: inline-block;
            position: relative;
            border-radius: 20px;
            border: 1px solid #ccccc6;
            box-shadow: 0 0 1px 1px #ececf3;
            background-color: #fff;
            cursor: pointer;
        }

        .switch input:after {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            top: 2px;
            left: 3px;
            border-radius: 50%;
            background-color: #ccccc6;
            transition: .2s left, .2s background-color;
        }

初始小圓圈在左側，當開關狀態為開啟時，右移，並更新開啟狀態的背景色

        .switch input:checked:after {
            left: 15px;
            background-color: #36a6fa;
            transition: .2s left, .2s background-color;
        }

以上就是關鍵的代碼了，以下為完整的樣式

 1 <style>
 2     .switch-wrap {
 3             position: relative;
 4             margin: 50px auto;
 5             width: 120px;
 6             height: 40px;
 7             font: 14px/1.5 Arial, Sans-Serif;
 8         }
 9 
10         .switch,
11         .switch input,
12         .switch input:before {
13             width: 30px;
14             height: 14px;
15         }
16 
17         .switch input {
18             position: absolute;
19             right: 0;
20         }
21 
22         .switch input:before {
23             content: '';
24             display: inline-block;
25             position: relative;
26             border-radius: 20px;
27             border: 1px solid #ccccc6;
28             box-shadow: 0 0 1px 1px #ececf3;
29             background-color: #fff;
30             cursor: pointer;
31         }
32 
33         .switch input:after {
34             content: '';
35             position: absolute;
36             width: 12px;
37             height: 12px;
38             top: 2px;
39             left: 3px;
40             border-radius: 50%;
41             background-color: #ccccc6;
42             transition: .2s left, .2s background-color;
43         }
44 
45         .switch input:checked:after {
46             left: 15px;
47             background-color: #36a6fa;
48             transition: .2s left, .2s background-color;
49         }
50 
51 
52     </style>

4. 開關的測試

最後，可結合JS檢測一下開關的狀態變化

    <script src="jquery.js"></script>
    <script type="text/javascript">
        $('#switch').change(function() {
            $('.switch-action').text(this.checked ? '關閉' : '開啟');
        });
    </script>