如何使用 CSS 更改单选按钮的颜色?

cssweb developmentfront end technology更新于 2025/3/8 8:44:17

单选按钮是一种常见的表单元素。它允许用户从一组选项中选择一个选项。它通常与一组标签一起使用，每个标签都与一个对应的单选按钮关联。在本文中，我们将介绍如何使用 CSS 更改单选按钮的颜色。

什么是单选按钮?

单选按钮是网页或应用程序上的一个小圆形按钮，允许用户从一组选项中选择一个选项。它也被称为"选项按钮"。它通常用于表单、调查和测验中，这些应用中一次只能选择一个选项。

使用 CSS 更改单选按钮的颜色

自定义单选按钮的外观是 Web 开发人员和设计人员的常见任务。可以修改的一个方面是单选按钮的颜色。这可以通过使用 CSS 属性选择器来实现，它允许用户根据元素的属性进行选择。例如，要选择所有单选按钮，我们可以使用以下 CSS 代码 -

input[type="radio"] {
    /* CSS 样式在此处 */
}

选择单选按钮后，我们使用 CSS 更改其颜色。这可以通过使用 color 属性来实现。例如，要将所有单选按钮的颜色更改为绿色，我们可以使用以下 CSS 代码 -

input[type="radio"] {
    color: green;
}

示例

这是一个更改单选按钮颜色的示例。

<html> 
   <title>Welcome to Tutorialspoint</title>
   <head>
      <style>
         body{
            text-align:center;
         }
         input[type=radio] {
            accent-color: green;
         }
      </style>
   </head>
   <body>
      <h3>Change the color of radio buttons using CSS </h3>
      <input type="radio" id="RadioButton" name="RadioButton" value="RadioButton">
      <label for="RadioButton">Radio Button</label>
   </body>
</html>

同样，我们可以通过使用 background-color 属性来更改单选按钮的颜色。如果我们想要更改整个按钮的颜色，包括按钮本身及其周围的空间，这将非常有用。例如，要将所有单选按钮的背景颜色更改为蓝色，我们可以使用以下 CSS 代码 -

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

示例

这是另一个更改单选按钮颜色的示例。

<html>
   <style>
      body{
         text-align:center;
      }
      input[type=radio] {
         appearance: none;
         padding: 10px;
         background-color: yellow;
         border-radius:50%;
      }
      input[type=radio]:checked {
         background-color: blue;
      }
   </style>
   <body>
      <h3>Change the color of radio buttons using CSS </h3>
      <form>
         <input type="radio" id="RadioButton" name="Button" value="Button">
         <label for="RadioButton">Radio Button</label>
      </form>
   </body>
</html>