开关按钮 CSS 样式 1

最新推荐文章于 2024-05-18 10:01:50 发布

正在修炼的IT大佬

最新推荐文章于 2024-05-18 10:01:50 发布

阅读量611

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_34045989/article/details/89062270

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用纯CSS来创建一个美观且交互式的开关按钮。通过隐藏真实的input元素并利用label的伪元素特性，实现了开关状态的变化效果。当开关被激活时，背景颜色会变为绿色，同时白色的小圆点会平滑地移动到右侧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【HTML】

【CSS】

        .chooseBtn {
            display: none;/*input不可见，实际只用到了lable*/
        }

        .choose-label {
            box-shadow: #ccc 0px 0px 0px 1px;
            width: 60px;/*长条长度*/
            height: 30px;/*长条高度*/
            display: inline-block;
            border-radius: 20px;
            position: relative;
            background-color: #bdbdbd;
            overflow: hidden;
        }
        /*小圆点*/
        .choose-label:before {
            content: '';
            position: absolute;
            left: 0;
            width: 30px;/*圆点半径*/
            height: 30px;/*圆点半径*/
            display: inline-block;
            border-radius: 20px;
            background-color: #fff;
            z-index: 20;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }