132 votes

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

s'ils 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 à tous les commentaires qui sont soit en type="text" ou type="password".

Sinon je serait de régler tous les commentaires où type != "checkbox".

Semble, je tiens à avoir pour ce faire:

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

N'est-ce pas là une façon de faire:

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

ou

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

Eu un coup d'oeil autour, et il ne semble pas comme il y a 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?

245voto

Patrick McElhaney Points 22093

CSS3 est une pseudo-classe appelé :non()

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

Voici un exemple complet.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <style type="text/css" media="screen">
        input:not([type='checkbox']) {    
            visibility: hidden;
        }  

    </style>
</head>
<body>                  

    <p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>

    <p>
    <input type="text" />
    <input type="password" />
    <input type="checkbox" />
  </p>
</body>
</html>

Si vous avez besoin de soutien IE8 ou une version antérieure, vous pouvez utiliser un polyfill comme IE9.js. Ou, vous pourriez 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ées qui ne sont pas "checkbox".

31voto

codemonkeh Points 886
 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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X