2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

纯css实现开关按钮(滑块)

html+css作者:猿2048志愿者

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

这里写图片描述

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>
本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:CSS Sprites精灵图-图像拼合的使用
» 下一篇:CSS中提升优先级属性!important的用法总结
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段