Sélecteurs de type d'entrée CSS - Possible d'avoir une syntaxe «ou» ou «non»?

101

S'ils existent en programmation),

Si j'ai un formulaire HTML avec les entrées suivantes:

<input type="text" />
<input type="password" />
<input type="checkbox" />

Je souhaite appliquer un style à toutes les entrées qui sont soit type="text"ou type="password".

Sinon, je me contenterais de toutes les entrées où type != "checkbox".

Il me semble que je dois faire ceci:

input[type='text'], input[type='password']
{
   // my css
}

N'y a-t-il pas un moyen de faire:

input[type='text',type='password']
{
   // my css
}

ou

input[type!='checkbox']
{
   // my css
}

J'ai jeté un coup d'œil et il ne semble pas qu'il y ait un moyen de le faire avec un seul sélecteur CSS.

Pas grand-chose bien sûr, mais je suis juste un chat curieux.

Des idées?

RPM1984
la source

Réponses:

183

CSS3 a une pseudo-classe appelée : not ()

input:not([type='checkbox']) {    
    visibility: hidden;
}
<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
    	                              
<ul>
  <li>text: (<input type="text">)</li>  
  <li>password (<input type="password">)</li>    	
  <li>checkbox (<input type="checkbox">)</li> 
 </ul>


Sélecteurs multiples

Comme Vincent l'a mentionné, il est possible d'enchaîner plusieurs :not()s ensemble:

input:not([type='checkbox']):not([type='submit'])

CSS4, qui n'est pas encore largement pris en charge , permet plusieurs sélecteurs dans un:not()

input:not([type='checkbox'],[type='submit'])


Support hérité

Tous les navigateurs modernes prennent en charge la syntaxe CSS3. Au moment où cette question a été posée, nous avions besoin d'une solution de secours pour IE7 et IE8. Une option était d'utiliser un polyfill comme IE9.js . Un autre était d'exploiter la cascade en CSS:

input {
   // styles for most inputs
}   

input[type=checkbox] {
  // revert back to the original style
} 

input.checkbox {
  // for completeness, this would have worked even in IE3!
} 
Patrick McElhaney
la source
1
joli! Merci. ce sélecteur CSS3 est-il entièrement pris en charge? (Je ne me soucie vraiment que de IE7 +, FF3 +, Safari récent, Chrome récent)
RPM1984
1
Il est pris en charge dans IE9 + et tous les autres navigateurs modernes. quirksmode.org/css/contents.html#t37
Patrick McElhaney
12
Par souci d'exhaustivité, si vous voulez faire plusieurs "not", voici la syntaxe à utiliser: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent
25
input[type='text'], input[type='password']
{
   // my css
}

C'est la bonne façon de procéder. Malheureusement, CSS n'est pas un langage de programmation.

codemonkeh
la source
4
Vous pouvez cependant utiliser Less CSS ou Sass.
vbullinger
Moins, oui! J'aime cela.
Bartłomiej Zalewski