Comment changer la couleur d'un bouton radio en utilisant CSS ?-tutoriel CSS-php.cn

Comment changer la couleur d'un bouton radio en utilisant CSS ?

王林

Libérer： 2023-09-16 08:09:06

avant

1687 Les gens l'ont consulté

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

Le bouton radio est un élément de formulaire courant. Il permet aux utilisateurs de sélectionner une seule option parmi un groupe d'options. Il est souvent utilisé en conjonction avec un groupe d'étiquettes, chacune associée à un bouton radio correspondant. nous verrons comment changer la couleur des boutons radio en utilisant CSS

Qu'est-ce qu'un bouton radio ?

Un bouton radio est un petit bouton rond sur une page Web ou une application qui permet à l'utilisateur de sélectionner une option parmi un ensemble d'options. On l'appelle également « bouton d'option ». Il est souvent utilisé dans les formulaires, les enquêtes et les quiz où une seule option peut être sélectionnée à la fois.

Changez la couleur des boutons radio en utilisant CSS

La personnalisation de l'apparence des boutons radio est une tâche courante pour les développeurs et les concepteurs Web. Un aspect qui peut être modifié est la couleur des boutons radio. Cela peut être fait en utilisant le sélecteur d'attributs CSS, qui permet aux utilisateurs de sélectionner des éléments en fonction de ceux-ci. leurs attributs. Par exemple, pour sélectionner tous les boutons radio, nous pouvons utiliser le code CSS suivant −

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

Copier après la connexion

Après avoir sélectionné les boutons radio, nous utilisons CSS pour changer leur couleur. Ceci peut être réalisé en utilisant l'attribut color. Par exemple, pour changer la couleur de tous les boutons radio en vert, vous pouvez utiliser le code CSS suivant -

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

Copier après la connexion

Exemple

Voici un exemple de changement de couleur d'un bouton radio.

<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>

Copier après la connexion

De plus, nous pouvons changer la couleur des boutons radio en utilisant la propriété background-color. Cela peut être utile si nous voulons changer la couleur de l'ensemble du bouton, y compris le bouton lui-même et tout espace qui l'entoure. changez la couleur d'arrière-plan de tous les boutons radio en bleu, nous pouvons utiliser le code CSS suivant −

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

Copier après la connexion

Exemple

Ceci est un autre exemple pour changer la couleur du bouton radio.

<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>

Copier après la connexion

Conclusion

CSS permet une personnalisation facile des couleurs des boutons radio. Sélectionnez les boutons radio à l’aide des sélecteurs d’attributs et utilisez des attributs tels que la couleur et la couleur d’arrière-plan. L'utilisation de pseudo-classes permet également de modifier la couleur des boutons radio dans des états spécifiques. Grâce à ces techniques, les boutons radio peuvent être personnalisés pour offrir la meilleure expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!