如何使用 CSS Checkbox Hack 构建一个简单的切换组件

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

我们的开关组件

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

See the Pen Simple Toggle Switch Component With CSS Checkbox Hack by Envato Tuts+ (@tutsplus) on CodePen.

为了设计灵感，我们将使用 Envato Elements 上不再提供的 Hngry UI Kit - Food Delivery UI Kit。它与 sketch、figma 和 adobe XD 兼容，带有浅色和深色变体，并且包含比这些复选框更多的 UI 组件。看一看！

1. 从 html 标记开始

首先，我们将定义一个简单的有序列表，其类为switches. 每个列表项都将包含一个复选框及其关联的标签。每个标签将包含两个spans。第一个将保存文本内容，而第二个空的将负责切换开关。

综上所述，所需的标记如下所示：

<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>

  
</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;
  }
}

标签将表现为 flex 容器，它们的直接子级将分布在主轴的边界上：

.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 技术”并设法构建了一个有用的切换开关组件。希望你喜欢这个练习，并将它融入到即将到来的项目中。

以下是我们构建的内容的提醒：

See the Pen Simple Toggle Switch Component With CSS Checkbox Hack by Envato Tuts+ (@tutsplus) on CodePen.

一如既往，非常感谢您的阅读！

CodePen 上的 Checkbox Hack 灵感

有什么地方比 CodePen 更能看到其他拨动开关的实现？这里有一些很好的例子来激发你的胃口：

Nikolay Talanov 的多彩开关

See the Pen Colorful Switch (CSS Only) by Nikolay Talanov (@suez) on CodePen.

Aaron Iker 的 CSS Heart Switch

See the Pen CSS Heart Switch by Aaron Iker (@aaroniker) on CodePen.

Håvard Brynjulfsen 的拨动开关

See the Pen Switch | CSS only by Håvard Brynjulfsen (@havardob) on CodePen.

文章目录

我们的开关组件

1. 从 html 标记开始

2. 定义样式

构建交换机

3. Checkbox Hack：切换开关

结论

CodePen 上的 Checkbox Hack 灵感

- Nikolay Talanov 的多彩开关
- Aaron Iker 的 CSS Heart Switch
- Håvard Brynjulfsen 的拨动开关
- (S) oobleck 的 CSS 切换开关
- Chintu Yadav Sara 的性别切换开关
- Toggle Florin Pop 的径向效果