CSS 给单选按钮添加边框

在本文中，我们将介绍如何使用CSS为单选按钮添加边框。

阅读更多：CSS 教程

1. 使用border属性添加边框

要为单选按钮添加边框，我们可以使用CSS的border属性。该属性可以设置元素的边框样式、宽度和颜色。

下面是一个示例，演示如何为单选按钮添加边框：

<!DOCTYPE html>
<html>
<head>
<style>
.radio-btn {
  border: 2px solid black;
  padding: 10px;
}
</style>
</head>
<body>

<label class="radio-btn">
  <input type="radio" name="radio-btn"> Option 1
</label>
<br><br>
<label class="radio-btn">
  <input type="radio" name="radio-btn"> Option 2
</label>

</body>
</html>

在上面的示例中，我们为label元素应用了一个名为radio-btn的类。该类添加了border属性来定义边框样式。在示例中，我们使用了2像素宽度、黑色实线边框，并为边框添加了10像素的内边距。

2. 使用伪类选择器设置单选按钮的样式

除了使用border属性，我们还可以使用CSS的伪类选择器来设置单选按钮的样式。伪类选择器可以根据元素的状态或位置来选择并设置元素的样式。

以下是一个示例，演示如何使用伪类选择器为选中的单选按钮添加边框：

<!DOCTYPE html>
<html>
<head>
<style>
.radio-btn input[type="radio"]:checked + span {
  border: 2px solid blue;
  padding: 10px;
}
</style>
</head>
<body>

<label>
  <input type="radio" name="radio-btn">
  <span>Option 1</span>
</label>
<br><br>
<label>
  <input type="radio" name="radio-btn">
  <span>Option 2</span>
</label>

</body>
</html>

在上面的示例中，我们使用了input[type="radio"]:checked伪类选择器来选择被选中的单选按钮。然后，我们使用相邻选择器+选择紧接在已选中的单选按钮后面的span元素，并为其添加了边框。