基础 CSS 交换机大小调整类

CSS 交换机是基于 HTML 元素的输入控件。用户可以切换其状态（开关、打勾框等），从而触发相应的 JavaScript 动作。本文将介绍如何使用 CSS 调整交换机的大小。

调整交换机大小的样式类

使用以下样式类，可以调整交换机的大小：

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

其中，.switch 控制交换机的整体宽度和高度。.slider 控制交换机的横向、纵向位置、背景颜色和边框样式。.slider:before 控制交换机打勾框部分的颜色、大小和位置。input:checked + .slider 和 input:focus + .slider 分别控制交换机选中和聚焦状态下的样式。

使用方法

1. 复制以上 CSS 样式类到你的 CSS 文件中。
2. 在 HTML 中添加以下代码：

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

其中，<label> 元素是关联添加交换机和文字标签的方法，<input> 元素控制交换机的状态，<span> 元素是交换机本身。

结论

本文介绍了如何使用 CSS 调整交换机的大小，以及如何将交换机和文字标签关联。使用以上样式类，可以让你的交换机更加个性化，更好地满足你的需求。