<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>开关示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      /* 使用弹性盒子排列控件和标签 */

      li {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
      }

      /* 设置标签尺寸，使用绝对位置将开、关图形叠放 */

      label {
        width: 20px;
        height: 20px;
        line-height: 20px;
        position: relative;
      }

      label span {
        position: absolute;
      }

      /* 使用 apperance 删除单选框的默认样式，设置外围点击区域 */

      input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 44px;
        height: 24px;
        border-radius: 12px;
        border: 2px solid black;
        background: #eee;
        transition: all 0.4s;
      }

      /* 设置 ::before 内容的样式，使之与内部开关动作样式一致。 */

      input[type="checkbox"]::before {
        width: 16px;
        height: 16px;
        border-radius: 9px;
        background-color: black;
        content: '';
        position: absolute;
        top: 7px;
        left: 16%;
        transition: all 0.4s;
      }

      /* 设置外围背景色，设置内部开关动画，使用 transition 让动画流畅 */

      input[type="checkbox"]:checked {
        background-color: #ffaa00;
        transition: all 0.4s;
      }

      input[type="checkbox"]:checked::before {
        left: 35%;
        transition: all 0.4s;
      }

      /* 让标签的 开、关 部分响应点击 */

      input[type="checkbox"] ~ label .on, input[type="checkbox"]:checked ~ label .off {
        opacity: 0;
      }

      input[type="checkbox"] ~ label .off, input[type="checkbox"]:checked ~ label .on {
        opacity: 1;
      }

      /* 让 Chrome 在聚焦时的外围框架更细，而不现实默认的蓝色粗线。 */

      input:focus {
        outline: 1px dotted black;
      }

    </style>
  </head>
  <body>
    <ul>
      <li>
        <input type="checkbox" name="power" id="power">
        <label for="power"><span class="on">开</span> <span class="off">关</span></label>
      </li>
    </ul>
  </body>
</html>
