web-dev-qa-db-fra.com

sélecteur css pour faire correspondre un élément sans attribut x

Je travaille sur un fichier CSS et je trouve la nécessité de styliser les zones de saisie de texte. Cependant, je rencontre des problèmes. J'ai besoin d'une déclaration simple qui correspond à tous ces éléments:

<input />
<input type='text' />
<input type='password' />

... mais ne correspond pas à ceux-ci:

<input type='submit' />
<input type='button' />
<input type='image' />
<input type='file' />
<input type='checkbox' />
<input type='radio' />
<input type='reset' />

Voici ce que j'aimerais faire:

input[!type], input[type='text'], input[type='password'] {
   /* styles here */
}

Dans le CSS ci-dessus, notez que le premier sélecteur est input[!type]. Ce que je veux dire par là, c'est que je veux sélectionner toutes les zones de saisie où l'attribut type n'est pas spécifié (car, par défaut, il s'agit de texte mais input[type='text'] ne lui correspond pas). Malheureusement, il n’existe pas de sélecteur de ce type dans les spécifications CSS3.

Est-ce que quelqu'un connaît un moyen d'accomplir cela?

csscss-selectorscss3
291
spudly

: pas de sélecteur 

input:not([type]), input[type='text'], input[type='password'] {
   /* style here */
}

Support: dans Internet Explorer 9 et supérieur

466
eveliotc

Pour une solution plus multi-navigateurs, vous pouvez utiliser le style all comme vous le souhaitez, le texte et le mot de passe non saisis, puis un autre style qui remplace celui des radios, des cases à cocher, etc.

input { border:solid 1px red; }

input[type=radio], 
input[type=checkbox], 
input[type=submit], 
input[type=reset], 
input[type=file] 
      { border:none; }

- Ou -

quelle que soit la partie de votre code générant les entrées non typées, pouvez-vous leur attribuer une classe telle que .no-type ou simplement ne pas en générer du tout? De plus, ce type de sélection pourrait être fait avec jQuery.

30
Tim Santeford

Je voulais juste ajouter à cela, vous pouvez avoir le sélecteur: not seliz dans oldIE en utilisant selectivizr: http://selectivizr.com/

10
smets.kevin