CSS Selector pour <input type = "?"

Question

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

Je sais que je peux le faire avec des classes séparées mais je préfère utiliser CSS si possible. Je suis sûr, je peux mettre cela en javascript, mais encore une fois à la recherche de CSS.

Je cible IE7 +. Donc je ne pense pas pouvoir utiliser CSS3.

Modifier

Avec CSS3 je serais capable de faire quelque chose comme?

INPUT[type='text']:disabled qui serait encore mieux se débarrasser de ma classe tout à fait ...

Modifier

Les Ok merci pour l'aide! Voici donc un sélecteur qui modifie toutes les zones de texte et les zones qui ont été désactivés sans nécessiter la mise en toutes les classes, quand 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 + prend en charge les sélecteurs d'attributs:

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

entrée Elément de type d'attribut qui contient une valeur qui est égale à, commence par, contient ou se termine par une certaine valeur.

Autres sûrs sélecteurs (IE7 +) sont:

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

Ce qui pour <p><span/><span/></p> vous donnerait efficacement:

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

Fourrure lecture: Browser CSS compatibility on quirksmode.com

Je suis surpris que tout le monde pense que cela ne peut pas être fait. Les sélecteurs d'attributs CSS sont déjà là depuis un certain temps déjà. Je suppose qu'il est temps de nettoyer nos fichiers .css.

Answer 2

Désolé , La réponse courte est non. CSS (2.1) marquera seulement les éléments d'un DOM, pas leurs attributs. Vous devez appliquer une classe spécifique à chaque entrée. Bummer Je sais, parce que ce serait incroyablement utile.

Je sais que vous avez dit que vous préféreriez CSS sur JavaScript, mais vous devriez toujours envisager d'utiliser jQuery. Il fournit une manière très propre et élégante d'ajouter des styles aux éléments DOM en fonction des attributs.

Answer 3

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

Answer 4

Malheureusement, les autres affiches sont corrects que vous êtes ... en fait comme corrigé par kRON, sont ok avec votre IE7 et un doc strict, mais la plupart d'entre nous avec les exigences IE6 sont réduites à JS ou des références de classe pour cela, mais est une propriété CSS2, juste un sans support suffisant de IE^h^h navigateurs. Par manque de complétude, le sélecteur de type est - similaire à xpath - de la forme [attribute=value] mais de nombreuses variantes intéressantes existent. Il sera assez puissant quand il est disponible, bonne chose à garder dans votre tête pour IE8.

• w3 reference

• browser support reference