纯css实现开关按钮（滑块）

最新推荐文章于 2024-03-08 14:08:52 发布

erdouzhang

最新推荐文章于 2024-03-08 14:08:52 发布

阅读量9.6k

点赞数 3

分类专栏： html+css

本文链接：https://blog.csdn.net/erdouzhang/article/details/62876171

版权

html+css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何使用纯CSS创建功能完善的开关按钮，包括在线展示、代码下载和在线编辑选项，帮助开发者理解和应用这种UI组件。

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

在线展示开关按钮
 本地下载代码
 在线编辑

这里写图片描述

html:

<div class="onoffswitch">
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
     <label class="onoffswitch-label" for="myonoffswitch">
         <span class="onoffswitch-inner"></span>
         <span class="onoffswitch-switch"></span>
     </label>
 </div>

CSS：

<style>
    .onoffswitch {
        position: relative;
        width: 83px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .onoffswitch-checkbox {
        display: none;
    }

    .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #999999;
        border-radius: 20px;
    }

    .onoffswitch-inner {
        display: block;
        width: 200%;
        margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }

    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 19px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "ON";
        padding-left: 13px;
        background-color: #4FACDB;
        color: #FFFFFF;
    }

    .onoffswitch-inner:after {
        content: "OFF";
        padding-right: 13px;
        background-color: #F50E4C;
        color: #FAFAFA;
        text-align: right;
    }

    .onoffswitch-switch {
        display: block;
        width: 21px;
        margin: 4.5px;
        background: #FFFFFF;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 49px;
        border: 2px solid #999999;
        border-radius: 20px;
        transition: all 0.3s ease-in 0s;
    }

    .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }

    .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
        right: 0px;
    }
</style>