如何使用 CSS 创建自定义切换开关

让我们用 CSS 创建一个简单的自定义切换开关。最初尝试创建这个按钮时，我感到很困惑，因为很多开发人员都创建过这个按钮，但却没有一个人解释它是如何工作的。

经过一番努力之后，我学会了如何创建它，并想与大家分享。

我从Marcus Burnette 那里学到了这项技术。你可以看看他的Codepen，那里还有更多类似的有趣的代码。

预备知识

HTML、CSS基础知识（特别是伪元素）

工作原理

众所周知，当我们为输入分配标签时，我们也可以通过单击标签来定位输入。

这就是我们要利用的优势，通过它我们可以将标签转换为自定义开关，其作用与复选框相同。

让我们开始吧

这些是我们创建此按钮要遵循的步骤。

1.创建HTML结构

在此阶段，我们将创建 html 元素，即输入复选框和分配给它的标签，但其内部内容应该为空。

参考代码如下。




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>

<input type="checkbox" name="switch" id="switch">
<label for="switch"></label>

</body>

</html>

2.隐藏输入元素

现在我们将隐藏输入元素，正如我之前所说，我们将使用标签元素进行切换，因此我们不需要复选框。




input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

3. 设置按钮主体的样式

我们将创建开关的主体或球将在其中移动的外部。

参考代码如下。




label {
  display: block;
  width: 500px;
  height: 150px;
  background-color: #477a85;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0 0 20px #477a8550;
}

4.创建切换球

现在我们将使用伪元素创建切换球::after。

参考代码如下。




label::after {
  content: "";
  width: 120px;
  height: 120px;
  background-color: #e8f5f7;
  position: absolute;
  border-radius: 70px;
  top: 15px;
  left: 15px;
  transition: 0.5s;
}

在这个阶段，我们的 80％的工作已经完成，现在我们只需要添加动画来使我们的开关工作。

5.添加动画

我们知道，当我们切换标签时，复选框也会被切换。

现在我们将添加条件，当复选框被选中时，我们的球应该向右移动。



   input:checked + label:after {
   left: calc(100% - 10px);
   transform: translateX(-100%);
   }

更改按钮切换的背景




   input:checked + label {
   background-color: #243d42;
   }

现在，如果我们想要更平滑的磁力效果，当球被激活时，它的宽度应该会暂时增加。点击元素时，元素会被激活。我们可以通过使用:active选择器来实现这一点。



    label:active:after {
    width: 160px;
    }

输出预览

试用演示

在以下平台查找我

文章来源：https://dev.to/karankumardev/how-to-create-a-custom-toggle-switch-using-css-4pmi