MIUI option box switch style simulation, miui Option Switch Style

MIUI option box switch style simulation, miui Option Switch Style

There is IOS switch simulation, and of course there is MIUI switch simulation.
You can see the switch style in the setting options.

 

Final Effect

 

 

Implementation process 1. Option box checkbox

An option box is required for the simulated switch. The check box checkbox is used here.

2. Understand the Switch Process

Click the switch button to enable or disable it. The native checkbox cannot achieve the graphic effect, so additional elements are required to represent the switch in the graph.

In addition, we need to use the checkbox click effect and whether to check the checked effect after the click. Therefore, the checkbox cannot be hidden, but it can be overwritten.

To reduce the use of redundant tags, you can use pseudo elements: before,: after, and the label structure is

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

3. Implementation of the switch

Use the: before pseudo element as the switch background layer and the: after pseudo element as the switch item (that is, the small circle)

        .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;        }

The initial small circle is on the left side. When the switch status is enabled, it shifts right and updates the background color of the enabled status.

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

 

The above is the key code, and the following is the complete Style

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 :. 2 s left ,. 2 s background-color; 43} 44 45. switch input: checked: after {46 left: 15px; 47 background-color: # 36a6fa; 48 transition :. 2 s left ,. 2 s background-color; 49} 50 51 52 </style>Complete CSS code

 

4. Test the switch.

Finally, you can check the status change of the switch in combination with JS.

<Script src = "jquery. js "> </script> <script type =" text/javascript "> $ ('# switch '). change (function () {$ ('. switch-Action '). text (this. checked? 'Close': 'enabled');}); </script>