纯css实现仿ios表单开关

纯css实现仿ios表单开关

• 看看效果图
  

• html结构如下：

<label class="maple-checkbox">
        <input type="checkbox" class="ios-switch red bigswitch" checked />
        <div><div></div></div>
    </label>

• css内容：

/*表单开关样式*/
.maple-checkbox input[type="checkbox"]
{
    position: absolute;
    opacity: 0;
}
/* Normal Track */
input[type="checkbox"].ios-switch + div
{
    vertical-align: middle;
    width: 40px;
    height: 20px;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: .4s;
    -webkit-transition-property: background-color, box-shadow;
    box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
    margin: 25px 1.2em 15px 2.5em;
}

/* Normal Knob */
input[type="checkbox"].ios-switch + div > div
{
    float: left;
    width: 18px;
    height: 18px;
    border-radius: inherit;
    background: #ffffff;
    -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: transform, background-color, box-shadow;
    -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -moz-transition-duration: 0.4s;
    -moz-transition-property: transform, background-color;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    margin-top: 1px;
    margin-left: 1px;
}

/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div
{
    width: 60px;   /*开关宽度*/
    height: 28px;  /*开关高度*/
}

/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div
{
    width: 25px;    /*按钮宽度*/
    height: 25px;   /*按钮高度*/
    margin-top: 1px;
}
/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div
{
    -webkit-transform: translate3d(34px, 0, 0); /*控制按钮的左右*/
    -moz-transform: translate3d(34px, 0, 0);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/*改变颜色的*/
input[type="checkbox"].red.ios-switch:checked + div
{
    background-color: #f85200;
    border: 1px solid rgba(248, 82, 0,1);
    box-shadow: inset 0 0 0 10px rgba(248,82,0,1);
}
input[type="checkbox"].red.ios-switch:checked + div > div
{
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(248, 82, 0,1);
}

---

注意：

1.修改默认的组件，一般用label层套住该组件

2.该样式主要用到三个类：ios-switch（控制开关的显示样式）、red（控制开关的颜色）、bigswitch（控制开关的大小），可以修改相应的css来定制你需要的开关样式。

3.修改代码中注释的地方调节开关的大小和颜色

---

Demo地址：

http://download.csdn.net/detail/a46262563/9086435