如何使用 HTML 和 CSS 创建自定义单选按钮？

在 HTML 中创建单选按钮很简单，但是，如果你想自定义样式，就需要使用 CSS。在本文中，我将向你介绍如何使用 HTML 和 CSS 创建自定义单选按钮。

HTML 代码片段

HTML 中创建单选按钮的最基础的代码如下：

<input type="radio" id="option1" name="options" value="option1">
<label for="option1">Option 1</label>

<input type="radio" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>

上面的代码创建了两个单选按钮，其中 name 属性指定了它们所属的组，value 属性指定了每个选项的值，id 属性指定了每个选项的唯一标识符，for 属性指定了选项对应的标签。

CSS 代码片段

上面的 HTML 代码创建了单选按钮，但是它们的样式与默认样式相同。现在，我们将向你展示如何为这些单选按钮添加自定义样式。

input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

input[type="radio"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
  color: #333;
  display: inline-block;
  line-height: 20px;
}

input[type="radio"] + label::before, input[type="radio"] + label::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 1px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
}

input[type="radio"] + label::after {
  content: ' ';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 4px;
  background-color: #000;
  display: none;
}

input[type="radio"]:checked + label::after {
  display: block;
}

上面的 CSS 代码添加了样式到单选按钮。我们使用 position 属性来设置单选按钮的位置，使用 opacity 属性来隐藏单选按钮，使用 + 选择器来选择每个单选按钮的 label 元素，使用 ::before 和 ::after 伪元素来创建每个单选按钮的外观。我们使用 checked 伪类来应用选中的单选按钮的样式。

效果演示

现在，你可以使用上面的 HTML 和 CSS 代码片段来创建自定义单选按钮。如果你想查看演示效果，请访问 CodePen。

至此，我们就完成了如何使用 HTML 和 CSS 创建自定义单选按钮的介绍。希望对你有所帮助。