效果图 image.png

    <style>
            .Switch {
                margin: 0;
                padding: 0;
            }
            .Switch li {
                /*clear: both;*/
                /*line-height: 44px;*/
                /*border-bottom: 1px solid #CCC;*/
                /*list-style: none;*/
            }
            .Switch input {
                display: none
            }
            .Switch label {
                width: 49px;
                background: #CCC;
                height: 26px;
                border-radius: 14px;
                float: right;
                /*margin: 8px 10px 0 0;*/
                margin-right: .3rem;
                box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
            }
            .Switch label em {
                width: 24px;
                height: 24px;
                float: left;
                margin: 1px;
                border-radius: 13px;
                box-shadow: 2px 3px 8px rgba(0,0,0,.1);
                background: #FFF;
                transition: 0.1s;
            }
            .Switch input:checked + label {
                background: #508cee;
            }
            .Switch input:checked + label em {
                margin: 1px 1px 1px 25px;
            }
            .Switch input:disabled + label {
                opacity: 0.5
            }
    </style>

<ul class="Switch">
    <li>
        <input type="checkbox" name="Storage" id="date4" checked="checked">
        <label for="date4"><em></em></label>
    </li>
</ul>