[css]switch开关按钮，适用于移动端和IE9火狐谷歌

来源：互联网发布：http端口号设置编辑：程序博客网时间：2024/06/05 18:13

参考移动端的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; }

0 0