纯css3模仿ios手机的switch开关

css完全模仿微信switch开关和ios手机的switch开关，无需要js。
全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿ios开关</title>
    <style>
        .ios-switch{
            width: 50px;
            height: 26px;
            border: 1px solid #e2e2e2;
            border-radius: 20px;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
            background-color: #ffffff;
            box-shadow: #c2c2c2 0 0 0 0 inset;
            position: relative;
            transition:.5s;
        }
        .ios-switch:before{
            content: '';
            width: 22px;
            height: 22px;
            border-radius: 100%;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            position: absolute;
            left:0;
            top:1px;
            transition:0.3s;
        }
        .ios-switch:checked{
            border-color: #1296db;
            background-color: #1296db;
        }
        .ios-switch:checked:before{
            left:26px;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="ios-switch" class="ios-switch" id="ios-switch">
</body>
</html>