css开关样式-仿ios

css开关样式-仿IOS预览代码css<style>label {display: block;height: 24px;width: 50px;border-radius: 1em;border: 0.1px solid gainsboro;transition: background-color 1s;box-shadow: 0px 0px 2px #888888 inset;}#

派的十二位

206人浏览 · 2022-05-16 19:41:17

派的十二位 · 2022-05-16 19:41:17 发布

css开关样式-仿IOS

预览

在这里插入图片描述

代码

css

<style>
label {
    display: block;
    height: 24px;
    width: 50px;
    border-radius: 1em;
    border: 0.1px solid gainsboro;
    transition: background-color 1s;
    box-shadow: 0px 0px 2px #888888 inset;
}

#turn {
    display: none;
}

label::before {
    content: "";
    display: block;
    border-radius: 100%;
    margin-top: 2px;
    margin-left: 2px;
    height: 20px;
    width: 20px;
    background-color: #b4b0b0;
    transition: margin 0.3s;
}

#turn:checked+label::before {
    margin-left: 28px;
    background-color: white;
    box-shadow: 1px 1px 10px #888888;
}

#turn:checked+label {
    background-color: #4BE369;
}
</style>

html

<body>
	<input id="turn" type="checkbox" onclick="onChange(this)" /><label for="turn"></label>
</body>

<script>

    function onChange(obj) {
        if(obj.checked){
            alert("选中")
        }else{
            alert("未选中")
        }
    }
 </script>