:checked伪类与开关效果实例页面

展示

代码

• HTML：

  <!-- 普通状态 -->
  <input type="checkbox" id="switch">
  <label class="cs-switch" for="switch"></label>
  <!-- 选中状态 -->
  <input type="checkbox" id="switch1" checked>
  <label class="cs-switch" for="switch1"></label>
  <!-- 禁用状态 -->
  <input type="checkbox" id="switch2" disabled>
  <label class="cs-switch" for="switch2"></label>
  <!-- 选中禁用状态 -->
  <input type="checkbox" id="switch3" checked disabled>
  <label class="cs-switch" for="switch3"></label>

• CSS：

  [type="checkbox"] {
      width: 44px; height: 26px;
      position: absolute;
      opacity: 0; margin: 0;
      cursor: pointer;
  }
  
  .cs-switch {
    display: inline-block;
    width: 44px; height: 26px;
    border-radius: 26px;
    background-color: currentColor;
    color: silver;
    transition: all .2s;
    cursor: pointer; 
  }
  .cs-switch::before {
    content: "";
    display: block;
    width: 22px; height: 22px;
    margin: 2px;
    border-radius: 50%;
    background-color: #fff;
    transition: margin-left .2s; 
  }
  :active:not(:disabled) + .cs-switch {
    background-image: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05));
  }
  :checked + .cs-switch {
    color: deepskyblue; 
  }
  :checked + .cs-switch::before {
    margin-left: 20px; 
  }
  :focus-visible + .cs-switch {
    outline: 1px dotted Hightlight;
    outline: 5px auto -webkit-focus-ring-color;
  }
  :disabled + .cs-switch {
    opacity: .4;
    cursor: default; 
  }