码云常用代码 2023-10-11

CSS实现开关按钮点击切换

纯css编写开关按钮点击切换效果。

效果图如下：

完整代码：

<!DOCTYPE html>
<html>
<head>
<title>纯css编写开关按钮点击切换</title>
<style type="text/css">
    #toggle-button{ 
        display: none; 
    }
    .button-label{
        position: relative;
        display: inline-block;
        width: 80px;
        background-color: #ccc;
        border: 1px solid #ccc;
        border-radius: 30px;
        cursor: pointer;
    }
    .circle{
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
    }
    .button-label .text {
        line-height: 30px;
        font-size: 18px;

        /*
        用来阻止页面文字被选中，出现蓝色
        可以将下面两行代码注释掉来查看区别
        */
       -webkit-user-select: none;
       user-select: none;
    }
    .on { 
        color: #fff; 
        display: none; 
        text-indent: 10px;
    }
    .off { 
        color: #fff; 
        display: inline-block; 
        text-indent: 53px;
    }
    .button-label .circle{
        left: 0;
        transition: all 0.3s;/*transition过度，时间为0.3秒*/
    }

    /*
    以下是checked被选中后，紧跟checked标签后面label的样式。
    例如：div+p 选择所有紧接着<div>元素之后的<p>元素
    */
    #toggle-button:checked + label.button-label .circle{
        left: 50px;
    }
    #toggle-button:checked + label.button-label .on{ 
        display: inline-block; 
    }
    #toggle-button:checked + label.button-label .off{ 
        display: none; 
    }
    #toggle-button:checked + label.button-label{
        background-color: #33FF66;
    }
</style>
</head>
<body>
    <input type="checkbox" id="toggle-button">
   <!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
    <label for="toggle-button" class="button-label">
        <span class="circle"></span>
        <span class="text on">开</span>
        <span class="text off">关</span>
    </label>
</body>
</html>

知识点：

1. label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input

2. (:checked + 紧邻其后面标签) 的选择器。例如：#toggle-button:checked + label 解释：当id为toggle-button的checked为选中状态时，就选择紧邻其后的label标签

3. user-select: none;这个属性用来阻止页面文字被选中，如果不添加此属性，点击切换开关时，开/关二字有时候会被选中，出现蓝色背景，如下图：

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

使用声明：
1. 本站所有素材（未指定商用），仅限学习交流。
2. 会员在本站下载的VIP素材后，只拥有使用权，著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途，织梦系统商业用途请预先授权。
码云笔记 » CSS实现开关按钮点击切换