CSS 如何改变单选按钮的颜色

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

什么是单选按钮

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

使用CSS来改变单选按钮的颜色

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

input[type="radio"] {
   /* CSS styles go here */
}

选择单选按钮后，我们使用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>