css checkbox_如何使用CSS Checkbox Hack构建简单的拨动开关组件

css checkbox

在这个简短的教程中，我们将学习如何利用“ CSS checkbox hack技术”构建仅CSS的开关组件。 在此过程中，我们还将研究Codepen上的其他开关实现。 听起来像一个很好的挑战？

我们的开关组件

这是我们在本教程中将要构建的内容-一个简单的待办事项清单：

为了获得设计灵感，我们将使用Envato Elements上的Hngry UI Kit-Food Delivery UI Kit 。 它与Sketch，Figma和Adobe XD兼容，具有亮色和深色变体，并且除了这些复选框之外，还包括更多的UI组件。 看一看！

1.从HTML标记开始

首先，我们将使用switches类定义一个普通的有序列表。 每个列表项将包含一个复选框及其关联的标签。 每个标签将包含两个span 。 第一个将保留文本内容，而第二个空将负责切换开关。

放在一起，这就是所需的标记：

<ol class="switches">
  <li>
    <input type="checkbox" id="1">
    <label for="1">
      <span>...</span>
      <span></span>
    </label>
  </li>
  <li>
    <input type="checkbox" id="2">
    <label for="2">
      <span>...</span>
      <span></span>
    </label>
  </li>
  
  <!-- more list items here -->
</ol>

2.定义样式

我们需要在样式中处理的第一件事是在视觉上隐藏复选框：

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

接下来，列表的最大宽度将为水平居中的内容：

.switches {
  max-width: 500px;
  width: 95%;
  margin: 50px auto 0;
}

为了完全按照我们希望的样式设置列表中的数字，我们将摆脱默认的浏览器样式，并利用CSS Counters的优势。 这将为我们提供由CSS生成的数字列表：

以下是相关样式：

/*CUSTOM VARIABLES HERE*/

ol {
  list-style: none;
}

.switches li {
  position: relative;
  counter-increment: switchCounter;
}

.switches li::before {
  content: counter(switchCounter);
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 2rem;
  font-weight: bold;
  color: var(--pink);
}

@media screen and (max-width: 600px) {
  .switches li::before {
    display: none;
  }
}

标签将充当弹性容器，其直接子代将分布在主轴的边界中：

.switches label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

建立开关

为了构建开关组件，我们将首先为相应的span元素（最后一个）指定一些固定尺寸。

接下来，我们将定义其::before和::after伪元素。 ::before伪元素将是一个圆形，而::after伪元素将具有一个关闭图标作为背景图像。

为了实现所有这些，下面是相应的样式：

/*CUSTOM VARIABLES HERE*/

.switches span:last-child {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 15px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  background: var(--gray);
  transition: all 0.3s;
}

.switches span:last-child::before,
.switches span:last-child::after {
  content: "";
  position: absolute;
}

.switches span:last-child::before {
  left: 1px;
  top: 1px;
  width: 24px;
  height: 24px;
  background: var(--white);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s;
}

.switches span:last-child::after {
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: url(uncheck-switcher.svg);
  background-size: 12px 12px;
}

3. Checkbox Hack：切换开关

现在开始有趣的部分！ 每次我们点击开关时，其外观都会发生如下变化：

进一步来说：

• 颜色会改变。
• 其::before伪元素的位置将更改。 它会随着从左到右的幻灯片过渡而移动。
• ::after伪元素的位置和背景图像将更改。 现在，它将位于其容器的左侧，并将包括复选标记作为背景图像。

为了满足上述所有要求， 我们将利用:checked 伪类和相邻的同级组合器 （ + ）。 如果您需要重新了解这些选择器的功能，请在本教程末尾查看资源。

以下是处理此功能的样式：

/*CUSTOM VARIABLES HERE*/

.switches [type="checkbox"]:checked + label span:last-child {
  background: var(--green);
}

.switches [type="checkbox"]:checked + label span:last-child::before {
  transform: translateX(24px);
}

.switches [type="checkbox"]:checked + label span:last-child::after {
  width: 14px;
  height: 14px;
  left: 8px;
  background-image: url(checkmark-switcher.svg);
  background-size: 14px 14px;
}

结论

就是这样，伙计们！ 在本教程中，我们利用了“ CSS checkbox hack技术”并设法构建了一个有用的拨动开关组件。 希望您喜欢这个练习，并将其纳入下一个项目中。

这提醒我们建立了什么：

与往常一样，非常感谢您的阅读！

除了CodePen，还有什么地方能看到其他拨动开关的实现？ 以下是一些激发食欲的好例子：

翻译自: https://webdesign.tutsplus.com/tutorials/toggle-switch-component-with-css-checkbox-hack--cms-35011

css checkbox