Sélecteur CSS pour <input type=" ?"

Question

Existe-t-il un moyen avec CSS de cibler toutes les entrées en fonction de leur type ? J'ai une classe de désactivation que j'utilise sur divers éléments de formulaire désactivés, et je définis la couleur d'arrière-plan des zones de texte, mais je ne veux pas que les cases à cocher aient cette couleur.

Je sais que je peux le faire avec des classes séparées mais je préfère utiliser les CSS si possible. Je suis sûr que je peux le faire en javascript, mais je préfère les CSS.

Je vise IE7+. Je ne pense donc pas pouvoir utiliser CSS3.

Modifier

Avec CSS3, je pourrais faire quelque chose comme ?

INPUT[type='text']:disabled ce serait encore mieux de se débarrasser complètement de ma classe...

Modifier

Ok, merci pour votre aide ! Voici donc un sélecteur qui modifie toutes les zones de texte et les zones qui ont été désactivées sans qu'il soit nécessaire de définir des classes, lorsque j'ai commencé cette question, je ne pensais pas que cela était possible...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Cela fonctionne dans IE7

Answer 1

Oui. IE7+ supporte les sélecteurs d'attributs :

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Entrée de l'élément avec le type d'attribut qui contient une valeur qui est égale à, commence par, contient ou se termine par une certaine valeur.

D'autres sélecteurs sûrs (IE7+) sont :

• Parent > enfant qui a : p > span { font-weight: bold; }
• Précédé de ~ élément qui est : span ~ span { color: blue; }

Qui pour <p><span/><span/></p> vous donnerait effectivement :

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Pour en savoir plus : Compatibilité CSS des navigateurs sur quirksmode.com

Je suis surpris que tous les autres pensent que ce n'est pas possible. Les sélecteurs d'attributs CSS sont là depuis un certain temps déjà. Je pense qu'il est temps de faire le ménage dans nos fichiers .css.

Answer 2

Malheureusement, les autres posters ont raison de dire que tu es ...en fait comme corrigé par kRON, vous sont ok avec votre IE7 et une doc stricte, mais la plupart d'entre nous avec les exigences d'IE6 sont réduites à des références de JS ou de classe pour cela, mais cela es une propriété CSS2, juste une propriété sans support suffisant de la part des navigateurs IE^h^h.

Pour être complet, le sélecteur de type est - comme pour xpath - de la forme [attribute=value] mais il existe de nombreuses variantes intéressantes. Il s'agit de se sera assez puissant lorsqu'il sera disponible, une bonne chose à garder en tête pour IE8.

• référence w3

• référence du support du navigateur

Answer 3

Vous pouvez le faire avec jQuery. En utilisant ses sélecteurs, vous pouvez sélectionner par des attributs, tels que le type. Cela nécessite cependant que vos utilisateurs aient Javascript activé, et un fichier supplémentaire à télécharger, mais si cela fonctionne...

Answer 4

Désolé, la réponse courte est non. CSS (2.1) ne marque que les éléments d'un DOM, pas leurs attributs. Vous devez appliquer une classe spécifique à chaque entrée.

C'est dommage, je sais, parce que ça aurait été incroyablement utile.

Je sais que vous avez dit que vous préfériez CSS à JavaScript, mais vous devriez quand même envisager d'utiliser jQuery. Il offre un moyen très propre et élégant d'ajouter des styles aux éléments du DOM en fonction des attributs.