checkbox复选框模拟开关效果演示页面

展示

代码

• HTML：

  <!-- 普通状态 -->
  <input type="checkbox" is="cs-switch">
  
  <!-- 选中状态 -->
  <input type="checkbox" is="cs-switch" checked>
  
  <!-- 禁用状态 -->
  <input type="checkbox" is="cs-switch" disabled>
  
  <!-- 选中禁用状态 -->
  <input type="checkbox" is="cs-switch" checked disabled>

• CSS：

  [is="cs-switch"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    outline: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
    background-clip: content-box;
    width: 4rem;
    height: 2rem;
    border: 2px solid;
    border-radius: 2rem;
    background-color: currentColor;
    color: #b6bbc6;
    font-size: 0;
    transition: .2s;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  [is="cs-switch"]:checked {
    color: deepskyblue;
    background-color: deepskyblue;
  }
  [is="cs-switch"]::before {
    content: "";
    flex: 0;
    transition: flex .2s;
  }
  [is="cs-switch"]::after {
    content: "";
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: 100%;
    background-color: #fff;
    opacity: 1;
    visibility: visible;
  }
  [is="cs-switch"]:active {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
  }
  [is="cs-switch"]:checked::before {
    flex: 1;
  }
  [is="cs-switch"]:disabled {
    opacity: .4;
    cursor: default;
  }