CSS - 选择器应用（开关式按钮）

最新推荐文章于 2024-08-12 09:02:03 发布

耳东蜗牛

最新推荐文章于 2024-08-12 09:02:03 发布

阅读量1.4k

点赞数

分类专栏： CSS 文章标签： CSS开关式按钮

本文链接：https://blog.csdn.net/It_rod/article/details/80451287

版权

CSS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

开关式按钮与复选框的行为十分相似，可以用来切换某个选项的开关状态：启用时，它是被按下的状态；停用时，它就是浮起的状态。在语义上，开关式按钮和复选框并没有本质上的差别，因此可以放心地使用这个技巧，不用担心语义上有问题。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            input[type="checkbox"] {
                position: absolute;
                clip: rect(0,0,0,0);
            }

            input[type="checkbox"] + label {
                display: inline-block;
                padding: .35em .5em .2em;
                background: #ccc;
                background-image: linear-gradient(#ddd, #bbb);
                border: 1px solid rgba(0,0,0,.2);
                border-radius: .3em;
                box-shadow: 0 1px white inset;
                text-align: center;
                text-shadow: 0 1px 1px white;
                cursor: pointer;
            }

            input[type="checkbox"]:checked + label, input[type="checkbox"]:active + label {
                box-shadow: .04em .1em .2em rgba(0,0,0,.6) inset;
                border-color: rgba(0,0,0,.3);
                background: #bbb;
            }

            body {  
                font: 150%/1.6 sans-serif; 
            }
        </style>
    </head>  
    <body>  
        <input type="checkbox" id="awesome" autofocus />
        <label for="awesome">开关式按钮（开启）!</label>
        <input type="checkbox" id="awesome1" autofocus />
        <label for="awesome1">开关式按钮（关闭）!</label>
    </body>  
</html>

结果如图：