switch 切换

GIF.gif

<style>
        .selected_remind_input input[type="checkbox"] {
            -webkit-appearance: none;
        }

        .selected_remind_input input[type="checkbox"]:checked+label,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label {
            background-color: #e0e0e0;
            border-radius: 24px;
            cursor: pointer;
            display: inline-block;
            height: 20px;
            position: relative;
            text-indent: -9999px;
            width: 40px;
        }

        .selected_remind_input input[type="checkbox"]:checked+label:after,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label:after {
            background-color: #fff;
            border-radius: 20px;
            content: " ";
            height: 15px;
            left: 2px;
            position: absolute;
            top: 2px;
            width: 15px;
        }

        .selected_remind_input input[type="checkbox"]:checked+label {
            background-color: #4d87ea;
        }

        .selected_remind_input input[type="checkbox"]:checked+label:after {
            left: 22px;
        }

        .selected_remind_input input[type="checkbox"]:checked+label,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label {
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
        }

        .selected_remind_input input[type="checkbox"]:checked+label:after,
        .selected_remind_input input[type="checkbox"]:not(:checked)+label:after {
            -webkit-transition: left 0.3s;
            transition: left 0.3s;
        }
    </style>

html结构

<div class="selected_remind_input  ">
        <input id="example2" type="checkbox" checked>
        <label for="example2">Check</label>
    </div>
    <div class="selected_remind_input  ">
        <input id="example1" type="checkbox" checked>
        <label for="example1">Check</label>
    </div>
    <div class="selected_remind_input  ">
        <input id="example0" type="checkbox" checked>
        <label for="example0">Check</label>
    </div>