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

来源：互联网发布：网络消费者购买动机编辑：程序博客网时间：2024/05/16 18:58

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

这里写图片描述

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>

0 0