CSS 使用CSS样式化输入单选按钮

在本文中，我们将介绍如何使用CSS来样式化输入单选按钮。输入单选按钮是HTML表单中常见的一种元素，用于在多个选项中选择一个。默认情况下，浏览器会为输入单选按钮提供基本的样式，但我们可以使用CSS来自定义它们的外观，以适应我们的需求。

阅读更多：CSS 教程

基本样式化

首先，让我们来看一下如何基本样式化输入单选按钮。我们可以使用CSS选择器来选中单选按钮，并为其设置样式。以下代码演示了如何设置单选按钮的背景颜色和边框：

input[type="radio"] {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}

上述代码中，我们使用了属性选择器[type="radio"]来选中所有的输入单选按钮。然后，我们为选中的单选按钮设置了背景颜色和边框。

自定义样式

除了基本样式化外，我们还可以使用CSS来自定义单选按钮的外观。以下是一些常用的样式设置：

隐藏默认样式

默认情况下，浏览器会为单选按钮提供默认的外观样式。如果我们想要完全自定义单选按钮的外观，可以通过以下代码将其隐藏：

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

上述代码中，我们使用了appearance属性和浏览器前缀来将单选按钮的默认样式设为none，以隐藏它们的外观。

自定义选中状态

在默认情况下，选中的单选按钮会显示为一个填充的圆点。我们可以使用CSS伪类选择器:checked来自定义选中状态的外观。以下代码演示了如何将选中的单选按钮的背景颜色更改为蓝色：

input[type="radio"]:checked {
  background-color: blue;
}

上述代码中，我们使用了伪类选择器:checked来选中选中的单选按钮，并为其设置了背景颜色。

自定义未选中状态

与选中状态类似，我们也可以使用CSS来自定义未选中状态的样式。以下代码演示了如何将未选中的单选按钮的背景颜色更改为灰色：

input[type="radio"]:not(:checked) {
  background-color: gray;
}

上述代码中，我们使用了伪类选择器:not(:checked)来选中未选中的单选按钮，并为其设置了背景颜色。

示例

下面是一个完整的示例，展示了如何使用CSS样式化输入单选按钮：

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border: 1px solid #ccc;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      outline: none;
      cursor: pointer;
    }

    input[type="radio"]:checked {
      background-color: blue;
    }

    input[type="radio"]:not(:checked) {
      background-color: gray;
    }
  </style>
</head>
<body>
  <label for="option1">
    <input type="radio" id="option1" name="options" value="1"> Option 1
  </label>
  <label for="option2">
    <input type="radio" id="option2" name="options" value="2"> Option 2
  </label>
  <label for="option3">
    <input type="radio" id="option3" name="options" value="3"> Option 3
  </label>
</body>
</html>

上述代码中，我们首先使用CSS样式化了输入单选按钮的基本外观，包括边框、圆角和尺寸等。然后，我们使用:checked伪类选择器为选中的单选按钮设置了背景颜色为蓝色，使用:not(:checked)伪类选择器为未选中的单选按钮设置了背景颜色为灰色。最后，我们在HTML中使用<label>元素来关联单选按钮和其文本标签。