css开关样式-仿ios

派的十二位

于 2022-05-16 19:41:17 发布

阅读量301

点赞数

分类专栏： css样式文章标签： css javascript html

本文链接：https://blog.youkuaiyun.com/weixin_43418331/article/details/124806455

版权

css样式专栏收录该内容

1 篇文章

订阅专栏

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>