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

Question

Si elles existent dans la 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". Sinon, je voudrais régler pour toutes les entrées type != "checkbox".

Il semble que j'avoir à faire:

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

est pas là une façon de le faire:

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

ou

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

J'ai eu un coup d'oeil , et il ne semble pas y avoir un moyen de le faire avec un seul sélecteur CSS.

Pas une grosse affaire bien sûr, mais je suis juste un chat curieux.

Des idées?

Answer 1

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> 
 
    \t        
 
<ul> 
 
    <li>text: (<input type="text">)</li> 
 
    <li>password (<input type="password">)</li>  \t 
 
    <li>checkbox (<input type="checkbox">)</li> 
 
</ul>

---

Si vous avez besoin pour soutenir IE8 ou plus tôt, vous pouvez utiliser un polyfill comme IE9.js. Ou vous pouvez simplement faire ceci:

input { 
    // styles for most inputs 
} 

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

C'est techniquement deux sélecteurs, mais il vous évite d'avoir à penser à tous les types d'entrée qui ne sont pas « case à cocher. »

Answer 2

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.