纯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.修改代码中注释的地方调节开关的大小和颜色