html，css - 苹果开关按钮

最新推荐文章于 2024-05-16 03:09:27 发布

WahFung_

最新推荐文章于 2024-05-16 03:09:27 发布

阅读量2.2k

点赞数 3

文章标签： css html 按钮开关：checked

本文链接：https://blog.csdn.net/qq_43161149/article/details/82531732

版权

通过使用单选框的选中状态（：checked）进行更改样式

：checked 和：hover 的概念差不多，但是要搭配上lable标签

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

效果：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <label class="switch" >
            <input type="checkbox" />
            <div class="slider round"></div>
        </label>


        <style>
            .switch{
                width: 60px;
                height: 34px;
                position: relative;
                display: inline-block;
            }
            input{
                display:none ;
            }
            .round{
                border-radius: 24px;
            }
            .slider{
                background: #ccc;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                transition: all .4s;
                cursor: pointer;
            }
            //小圆点
            .slider:after{
                content: '';
                width: 26px;
                height: 26px;
                display: block;
                border-radius: 50%;
                background-color: #FFFFFF;
                position: absolute;
                top: 4px;
                left: 4px;
                transition: all .4s;
            }

            //单选框选中后改变的样式
            input:checked+.slider{
                background: #2196F3;
            }
            input:checked+.slider:after{
                transform: translateX(26px);
            }
        </style>
    </body>
</html>

使用这种方法可以发挥创意，做更多的扩展。
第一次发博文，如果有不对的地方也请指出，希望可以共同学习！

WahFung_

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html，css - 苹果开关按钮

通过使用单选框的选中状态（：checked）进行更改样式：checked 和：hover 的概念差不多，但是要搭配上lable标签label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。效果：代码如下：&lt;!DOCTYP...
复制链接

扫一扫