web-dev-qa-db-fra.com

Sélecteurs de type d'entrée CSS - Possibilité d'avoir une syntaxe "ou" ou "pas"?

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 veux appliquer un style à toutes les entrées qui sont soit type="text" ou type="password".

Alternativement, je réglerais pour 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 moyen de faire:

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

ou

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

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

Ce n'est pas grave, bien sûr, mais je ne suis qu'un chat curieux.

Des idées?

htmlcsscss-selectors
87
RPM1984

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 de chaîner plusieurs :not() s ensemble:

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

CSS4, qui est pas encore largement supporté , autorise plusieurs sélecteurs dans un :not()

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


Support hérité

Tous les navigateurs modernes supportent la syntaxe CSS3. Au moment où cette question a été posée, nous avions besoin d'une solution de rechange pour IE7 et IE8. Une option consistait à utiliser un polyfill tel que IE9.js . Une 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!
}
164
Patrick McElhaney
input[type='text'], input[type='password']
{
   // my css
}

C'est la bonne façon de le faire. Malheureusement, CSS n'est pas un langage de programmation.

22
codemonkeh