CSS only单选按钮

概述

CSS only单选按钮是指只使用CSS来创建单选按钮而不使用JavaScript。这种方法虽然看似困难，但它能够使得网页加载更快且可跨浏览器。

实现

实现CSS only单选按钮的关键是使用CSS伪类和属性选择器。我们需要以下代码：

<input type="radio" id="radio1" name="radio" checked>
<label for="radio1">选项1</label>

<input type="radio" id="radio2" name="radio">
<label for="radio2">选项2</label>

<input type="radio" id="radio3" name="radio">
<label for="radio3">选项3</label>

这是三个拥有相同的name属性的单选按钮输入框，每个输入框都有一个label元素，这个元素的for属性与对应的单选按钮的id属性相同。此时，这三个单选按钮是默认样式，需要在CSS中添加样式。

/* 隐藏原生input */
input[type="radio"] {
  display: none;
}

/* 定义label的样式 */
label {
  display: inline-block;
  margin: 0 0.5rem 0 0;
  cursor: pointer;
  position: relative;
  font-weight: normal;
}

/* 定义选中label样式 */
label:before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5rem;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  background-color: #fff;
  vertical-align: middle;
  transition: all 0.2s;
}

/* 定义选中label样式 */
input[type="radio"]:checked + label:before {
  border-color: #2ecc71;
  background-color: #2ecc71;
}

代码解释：

• 第一个样式隐藏了原生的input元素，因为我们要用CSS去设定样式。
• 第二个样式定义了每个label元素的样式。
• 第三个样式定义了label元素的样式，它的: before伪类用来显示一个圆圈。
• 第四个样式定义选中label元素的样式，使用: checked伪类来设置选中样式。

结论

使用CSS only单选按钮是一种优化网页负荷的方法，因为它避免了引入JavaScript脚本的累赘。要实现这种效果，我们需要利用CSS伪类和属性选择器来设计样式。虽然这种方法的样式相对简单，但是要确保在各种不同的浏览器中呈现出相同的效果，这需要利用浏览器的开发者工具来调整样式。