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

admin管理员组

文章数量:1558077

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

本文标签： 适用于火狐按钮cssSwitch