手机设置开关css

在网页设计中，css样式是非常重要的。开启或关闭css样式对于网页的展示效果有非常大的影响。在手机端，我们通常通过设置开关来控制css样式的开启或关闭。

//html代码div class="toggleBtn">
      input type="checkbox" id="toggle" />
      label for="toggle">
    /label>
    /div>
//css代码.toggleBtn {
      display: inline-block;
      position: relative;
      width: 50px;
      height: 30px;
}
.toggleBtn input[type="checkbox"] {
      opacity: 0;
      width: 0;
      height: 0;
}
.toggleBtn label {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
      background: #ddd;
      border-radius: 15px;
      transition: background-color .3s;
}
.toggleBtn label:after {
      display: block;
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      transition: all .3s;
}
.toggleBtn input[type="checkbox"]:checked + label {
      background-color: #77c5e5;
}
.toggleBtn input[type="checkbox"]:checked + label:after {
      transform: translate(100%, -50%);
      background-color: #00bcd4;
}
    

上面的代码中，使用了一个input标签和一个label标签。当input标签通过checked属性被选中时，对应的样式发生变化。整个开关的样式通过css控制，在手机上也能支持交互效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！