参考移动端的switch按钮的CSS写法,弄了一个在手机和PC上都能用的(ie9以及以上,IE9大致能用,但是过度动画不平滑)。
效果图如:
在线演示:点击打开链接
移动&PC端的:
/*html结构:*/
<label class="switch4PC">
<input id="myInputPC" type="checkbox" value="0" name="myinputPC"/>
<i></i>
</label>
/*css:*/
.switch4PC {
display: inline-block;
position: relative;
font-size: 12px;
width: 22px;
height: 13px;
line-height: 13px; }
.switch4PC input {
display: none; }
.switch4PC input:checked + i:before {
border-color: #3B99FC;
-webkit-box-shadow: #3B99FC 0 0 0 16px inset;
box-shadow: #3B99FC 0 0 0 16px inset;
background-color: #3B99FC;
transition: background-color .4s;
-webkit-transition: background-color .4s; }
.switch4PC input:checked + i:after {
left: 11px; }
.switch4PC i {
width: 22px;
height: 13px;
position: absolute;
z-index: 2;
border: 0;
background: none;
outline: 0; }
.switch4PC i:before {
content: '';
width: 20px;
height: 12px;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
border-radius: 20px;
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: top;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
box-shadow: #dfdfdf 0 0 0 0 inset;
-webkit-transition: border .4s, background-color .4s;
transition: border .4s, background-color .4s;
-webkit-background-clip: content-box;
background-clip: content-box; }
.switch4PC i:after {
content: '';
width: 10px;
height: 11px;
position: absolute;
top: 1px;
left: 0;
border-radius: 100%;
background-color: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: left .2s;
transition: left .2s; }
仅移动&谷歌浏览器的:
/*html结构:*/
<div class="switch">
<input id="myInput" type="checkbox" value="0" name="myinput"/>
</div>
/*css:*/
.switch {
display: inline-block;
position: relative;
font-size: 12px;
width: 22px;
height: 13px;
line-height: 13px; }
.switch input {
width: 22px;
height: 13px;
position: absolute;
z-index: 2;
border: 0;
background: 0 0;
-webkit-appearance: none;
outline: 0; }
.switch input:before {
content: '';
width: 20px;
height: 12px;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
border-radius: 20px;
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: top;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
box-shadow: #dfdfdf 0 0 0 0 inset;
-webkit-transition: border .4s, background-color .4s;
transition: border .4s, background-color .4s;
-webkit-background-clip: content-box;
background-clip: content-box; }
.switch input:after {
content: '';
width: 10px;
height: 11px;
position: absolute;
top: 1px;
left: 0;
border-radius: 100%;
background-color: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: left .2s;
transition: left .2s; }
.switch input:checked:before {
border-color: #3B99FC;
-webkit-box-shadow: #3B99FC 0 0 0 16px inset;
box-shadow: #3B99FC 0 0 0 16px inset;
background-color: #3B99FC;
transition: background-color .4s;
-webkit-transition: background-color .4s; }
.switch input:checked:after {
left: 11px; }