Seletores de tipo de entrada CSS - É possível ter uma sintaxe “ou” ou “não”?

101

Se eles existirem na programação),

Se eu tiver um formulário HTML com as seguintes entradas:

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

Quero aplicar um estilo a todas as entradas que sejam type="text"ou type="password".

Alternativamente, eu me contentaria com o where de todas as entradas type != "checkbox".

Parece que tenho que fazer isso:

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

Não existe uma maneira de fazer:

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

ou

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

Dei uma olhada e não parece que há uma maneira de fazer isso com um único seletor CSS.

Não é grande coisa, é claro, mas sou apenas um gato curioso.

Alguma ideia?

RPM1984
fonte

Respostas:

183

CSS3 tem uma pseudoclasse chamada : 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>


Seletores múltiplos

Como Vincent mencionou, é possível encadear vários :not()s:

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

CSS4, que ainda não é amplamente suportado , permite vários seletores em um:not()

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


Suporte legado

Todos os navegadores modernos suportam a sintaxe CSS3. No momento em que esta pergunta foi feita, precisávamos de um substituto para o IE7 e IE8. Uma opção era usar um polyfill como IE9.js . Outra era explorar a cascata em 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
fonte
1
Agradável! obrigado. esse seletor CSS3 é totalmente compatível? (Eu só me importo com o IE7 +, FF3 +, Safari recente, Chrome recente)
RPM1984
1
É compatível com o IE9 + e todos os outros navegadores modernos. quirksmode.org/css/contents.html#t37
Patrick McElhaney
12
Para fins de integridade, se você quiser fazer vários "não" s, esta é a sintaxe a ser usada: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent
25
input[type='text'], input[type='password']
{
   // my css
}

Essa é a maneira correta de fazer isso. Infelizmente CSS não é uma linguagem de programação.

codemonkeh
fonte
4
Você pode usar Less CSS ou Sass, no entanto.
vbullinger
Menos, sim! Eu amo isso.
Bartłomiej Zalewski