46 votes

Comment sélectionnez-vous un bouton radio dans CSS?

Comment sélectionnez-vous un bouton radio en CSS? Le code HTML avec lequel je travaille est généré, je ne peux donc pas y ajouter de classe ou d'autres attributs.

J'ai trouvé une entrée [type = "radio"] sur Internet, mais je ne sais pas s'il s'agit de CSS standard et pris en charge par la plupart des navigateurs.

Y a-t-il d'autres façons de sélectionner un bouton radio?

Merci,

Brett

82voto

Evan Meagher Points 3035

input[type="radio"] est un exemple d'un sélecteur d'attribut. Il fait partie de la CSS3 spec et est parfaitement légal. Le seul navigateur qui ne prend pas en charge est IE6. Si le soutien de IE6 est important pour le projet, alors vous devriez regarder dans l'ajout de classes pour les boutons de la radio en question.

Voici un article avec un exemple de comment utiliser efficacement un sélecteur d'attribut. Consultez cet article pour plus d'info sur CSS3 goodies.

9voto

annakata Points 42676

Le sélecteur d'attribut (input [type = "radio"]) est la bonne solution, largement prise en charge par tout sauf IE6 :)

Si vous n'avez pas la possibilité de modifier le code HTML pour injecter la prise en charge des noms de classe (ou l'accès à javascript pour y parvenir), vos options sont les suivantes:

UNE). pour vous assurer que votre site n'en dépend pas et permettre à IE6 de se dégrader gracieusement.

B). vivre sans

4voto

Josh Points 4165

vous pouvez utiliser jQuery pour sélectionner l'entrée et ajouter une classe dynamiquement.

Exemple (source: http://docs.jquery.com/Attributes/addClass#class):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:last").addClass("selected highlight");
  });
  </script>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
</body>
</html>

[Modifier]

une alternative est d'utiliser jQuery http://code.google.com/p/ie7-js/

il fixe des charges de problèmes avec les versions ie inférieur à 7 le correctif qui vous intéressera le plus est illustré ici:

http://ie7-js.googlecode.com/svn/test/attr-value.html

1voto

PatrikAkerstrand Points 23968

Celui que vous avez mentionné ci-dessus est la bonne façon de le cibler en CSS. Il a appelé un sélecteur d'attribut. Il n'est pas pris en charge par IE6 et cependant ci-dessous. Ils peuvent être simulées par l'ajout d'une condition de comportement script pour IE6. (Il suffit de chercher sur google, le fichier qui se termine habituellement .htc).

Il devrait probablement être noté que .htc-généralement, les fichiers de résultat dans d'horribles performance et devraient seulement être utilisés avec parcimonie et être testés de manière approfondie pour s'assurer que le gain de performance est acceptable.

0voto

Tomalak Points 150423

La façon évidente et portable de le faire est: Donnez-lui une classe, utilisez-la.

 <input type="radio" class="radio" ...>
 

et

 input.radio {
  ...
}
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X