web-dev-qa-db-fra.com

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

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 règle 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érerais utiliser CSS si possible. Je suis sûr que je peux définir ceci en javascript, mais encore une fois à la recherche de CSS.

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

Éditer

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

Éditer

OK, merci pour le coup de main! Voici donc un sélecteur qui modifie toutes les zones de texte et les zones qui ont été désactivées sans nécessiter de définition de classe. Lorsque j'ai commencé cette question, je n'avais jamais pensé que c'était possible ...

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

Cela fonctionne dans IE7

cssinternet-explorercss-selectors
105
JoshBerke

Oui. IE7 + prend en charge les sélecteurs d'attributs:

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

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

Les autres sélecteurs de coffre (IE7 +) sont:

  • Parent> enfant qui a: p > span { font-weight: bold; }
  • Précédé par un é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>

Lectures supplémentaires: Compatibilité CSS du navigateur sur 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à présents depuis un certain temps. Je suppose qu'il est temps de nettoyer nos fichiers .css.

154
Filip Dupanović

Malheureusement, les autres affiches indiquent que vous êtes ... effectivement corrigé par kRON, vous êtes d'accord avec votre IE7 et un doc strict, mais la plupart des nous avec IE6 exigences sont réduites à JS ou références de classe pour cela, mais est une propriété CSS2, juste un sans support suffisant de la part des navigateurs IE.

Par souci d'exhaustivité, le sélecteur de type est - semblable à xpath - de la forme [attribute=value] mais de nombreuses variantes intéressantes existent. Il sera assez puissant quand il sera disponible, bonne chose à garder à l’esprit pour IE8.

3
annakata

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

1
cdeszaq

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.

Bummer je sais, parce que ce serait incroyablement utile.

Je sais que vous avez dit préférer CSS à JavaScript, mais vous devriez quand même envisager d’utiliser jQuery. Il fournit un moyen très propre et élégant d’ajouter des styles aux éléments DOM basés sur des attributs.

0
Phil.Wheeler