纯 CSS 复选框和单选按钮

在前端网页开发中，复选框和单选按钮是非常常见的用户交互组件，可以让用户在一组选项之间进行选择和操作。为了美观和交互体验，我们可以使用纯 CSS 来实现这些组件，而无需使用 JavaScript 或其他框架。

实现复选框

基本样式

首先，我们需要为复选框设置一些基本样式，包括宽度、高度、颜色、边框等。以下是一个简单的例子：

.checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.checkbox::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #ccc;
  transition: all 0.2s;
}

.checkbox.checked::before {
  background: #4183c4;
  border: 1px solid #4183c4;
}

上面的代码定义了一个名为 checkbox 的类，表示一个复选框。其宽度为 20px，高度为 20px，有一个像素宽的灰色边框。在复选框内部，我们使用 ::before 伪元素来表示一个白色方块，该元素向上、向左移动两个像素，以保证它位于复选框正中央。当我们选中该复选框时，我们将伪元素的背景色和边框颜色改为蓝色。

事件处理

当用户点击复选框时，我们需要将其状态设置为选中或未选中。为此，我们可以使用 :checked CSS 伪类，或者监听 change 事件并更新复选框的类。

以下是一个使用事件处理的例子：

<div class="checkbox" onclick="toggleCheckbox(this)">
  <input type="checkbox" class="hidden-input" />
</div>

.hidden-input {
  display: none;
}

function toggleCheckbox(checkbox) {
  var input = checkbox.querySelector('.hidden-input');
  if (input.checked) {
    checkbox.classList.remove('checked');
    input.checked = false;
  } else {
    checkbox.classList.add('checked');
    input.checked = true;
  }
}

上面的代码创建了一个隐藏的 <input> 元素，它与复选框的位置重叠。当复选框被点击时，它将触发 toggleCheckbox 函数。该函数获取隐藏的 <input> 元素，切换复选框的类名，以及切换 <input> 元素的 checked 属性。

实现单选按钮

单选按钮与复选框类似，但它们会将一组选项限制在一个表单中，在每个表单中只能选择一个选项。

基本样式

单选按钮和复选框有相似的样式。以下是一个简单的例子：

.radio {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.radio::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s;
}

.radio.checked::before {
  transform: translate(-50%, -50%) scale(1);
}

上面的代码定义了一个名为 radio 的类，表示一个单选按钮。其宽度为 20px，高度为 20px，有一个像素宽的灰色边框。在单选按钮内部，我们使用 ::before 伪元素来表示一个小圆点，该元素位于单选按钮正中央。当我们选中该单选按钮时，我们将伪元素的 transform 属性设置为 scale(1)，以显示小圆点。

事件处理

与复选框类似，我们需要更新单选按钮的状态，并使用隐藏的 <input> 元素将选中的值传递给服务器。以下是一个例子：

<div class="radio" onclick="toggleRadio(this)">
  <input type="radio" name="options" value="option-1" class="hidden-input" />
</div>

.hidden-input {
  display: none;
}

var radios = document.getElementsByName('options');
for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener('change', function() {
    var checkedRadio = document.querySelector('.radio.checked');
    if (checkedRadio) {
      checkedRadio.classList.remove('checked');
    }
    this.parentNode.classList.add('checked');
  });
}

function toggleRadio(radio) {
  radio.querySelector('.hidden-input').checked = true;
  var checkedRadio = document.querySelector('.radio.checked');
  if (checkedRadio) {
    checkedRadio.classList.remove('checked');
  }
  radio.classList.add('checked');
}

上面的代码创建了一组单选按钮，它们具有相同的 name 属性，此属性可以将它们捆绑到一组中。当一个单选按钮被选中时，我们将取消以前选中的单选按钮，并将新选中的单选按钮设置为选中状态。

总结

通过使用纯 CSS，我们可以轻松地创建复选框和单选按钮，这些组件不仅具有良好的外观，而且无需依赖于额外的 JavaScript 库或框架。在实际项目中，我们可以使用这些基本样式作为出发点，并根据需要进行自定义。