使用 CSS 创建一个简单的开/关滑动切换开关

封面照片由 Wolfgang Mennel 拍摄，来自Unsplash。

前几天在工作中，有人要求我把用于管理用户活动状态的双按钮设置改成某种滑动切换小部件。

因此，与其点击按钮来启用/禁用用户，不如使用某种开/关切换开​​关来更改用户的状态。

过去，当我遇到类似情况时，我通常会在谷歌上搜索解决方案，然后将其复制到我正在做的项目中。

这次，我想从头开始创建一个属于自己的小部件，了解如何创建这样的小部件。

这是幻灯片切换功能的最终效果：

我选择使用 HTML/CSS 实现一个简单的滑动切换开关状态，以使该小部件更易于访问，并给自己增加一些挑战！

我是这样做的。

标记

<div class="custom-checkbox">
  <input id="status" 
         type="checkbox" 
         name="status">
  <label for="status">
    <div class="status-switch"
         data-unchecked="Off"
         data-checked="On">
    </div>
  </label>
</div>

希望这些标记本身就能说明问题，但如果您不确定上面的内容，以下是一些要点：

• 我们将所有内容包裹在一个div元素中，我们将使用该元素设置切换按钮的整体高度和宽度。
• 这里有一个复选框input，我们将使用 CSS 样式将其隐藏，主要内容将位于该label元素内部（该元素本身又包含一个子元素div）。
• 在元素的属性中指定复选框的inputid ，允许用户通过单击元素来选中/取消选中该复选框元素。forlabelinputlabel
• 内部div有label两个数据属性（data-unchecked和data-checked），它们将构成我们幻灯片切换两种状态的文本。

最初，我尝试使用两个单选按钮输入来实现滑动切换，每个按钮分别代表开或关状态。

然而，这种方法只走了这么远，样式就变成了一场噩梦，所以我决定将单选按钮改为单个复选框，这让一切都变得容易多了。

由于滑动切换按钮只有两种状态：要么“选中”，要么“未选中”，因此使用复选框更有意义。

SCSS

滑动切换的样式可以用纯 CSS 实现，但是使用 SCSS 可以更轻松地处理元素层次结构。

数量还算可观，所以我们把它分成几个部分来讨论。

容器元素

.custom-checkbox {
  width: 260px;
  height: 60px;

  input#status {
    display: none;

我们首先要做的就是设置滑动切换按钮的尺寸。更改这些width值height将缩放所有其他元素以适应尺寸。

我们还会隐藏输入元素，这样就看不到默认的 HTML 复选框input元素，所有自定义设置都将保留在label.

标签和内部 div 内容

    + label {
      height: 100%;
      width: 100%;
      > .status-switch {
        cursor: pointer;
        width: 100%;
        height: 100%;
        position: relative;
        background-color: grey;
        color: white;
        transition: all 0.5s ease;
        padding: 3px;
        border-radius: 3px;

使用相邻兄弟选择器（+符号），我们可以选择label与元素相邻的元素input。

在确保height并且width是之后，我们以类为的内部100%为目标。divlabel.status-switch

这将是滑动切换按钮的“未选中”、“非活动”或“关闭”状态。

这里的一些关键事项是确保position将其设置为，relative因为我们将对其中的元素进行绝对定位，并且padding设置的值还将用于调整“滑动”按钮的内部高度和宽度。

您可以在此处选择background-color未选中状态。

伪元素的前后对比

        &:before,
        &:after {
          border-radius: 2px;
          height: calc(100% - 6px);
          width: calc(50% - 3px);
          display: flex;
          align-items: center;
          position: absolute;
          justify-content: center;
          transition: all 0.3s ease;
        }

以上设置了一些用于显示“开/关”before元素的通用样式和伪元素。after

这里有一些基本的弹性样式，可以将文本内容定位在每个元素的中心，并且我们使用padding在上一步中设置的值来稍微减少，以便在滑动切换width按钮height周围留出一点边框。

如果您现在查看滑动切换元素，它看起来会像这样：

这是因为 `<div>`before和 ` after<span>` 元素尚未可见，并且它们没有任何内容。

所以让我们给它们添加一些不同的样式，以便正确定位它们。

定位前后

        &:before {
          background-color: white;
          color: black;
          box-shadow: 0 0 4px 4px rgba(#000, 0.2);
          left: 3px;
          z-index: 10;
          content: attr(data-unchecked);
        }

        &:after {
          right: 0;
          content: attr(data-checked);
        }

我们将使该before元素具有白色背景，从而形成滑动切换的“按钮”部分，并将其left属性设置为3px，这将再次保留切换周围的边框。

该after元素将位于right包含元素的右侧。

这两个元素的内容都将设置为data-attribute我们在初始标记中分别设置的内容。

我们的滑动切换按钮现在应该看起来像这样：

 更新已检查状态

    &:checked + label > .status-switch {
      background-color: green;

      &:after {
        left: 0;
        content: attr(data-unchecked);
      }

      &:before {
        color: green;
        left: 50%;
        content: attr(data-checked);
      }

为了完成我们的滑动切换，我们只需定位到元素:checked的状态input，并深入到.status-switch分配给内部div的类label。

在选择器内部，我们可以设置一个新的background-color，然后基本上只是“交换”before和after伪元素。

我们通过更新它们的left位置和content属性来实现这一点。

由于transition设置了相应的属性，该before元素看起来像是滑入到位，并且淡入background-color淡出.status-switch。

结论

只需一些 CSS，您就可以创建自己的自定义输入框、按钮、切换开关和滑块，从而实现很多功能。

这样做的目的是为了让代码更易于理解，无需使用 JavaScript。

我惊讶地发现，一旦我掌握了元素的层次结构以及input选中或未选中状态下应该发生什么，创建滑动切换的样式就相对容易了。

我在完成的代码中只使用了 Sass 的嵌套功能，只是为了尽可能提高代码的可读性，但这个示例还可以改进，利用其他 Sass 功能，例如变量、mixin 等，来创建一个更可重用和可定制的滑动切换组件。

完整的代码和演示都在 Codepen 上：https://codepen.io/codebubb/pen/OJXRGyN

请在Twitter上关注我（@codebubb），获取更多文章和视频。

您有自己设计的自定义复选框或滑动切换按钮的示例吗？请在下方评论区留言！