Selettori del tipo di input CSS - È possibile avere una sintassi "or" o "not"?


101

Se esistono in programmazione),

Se ho un modulo HTML con i seguenti input:

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

Voglio applicare uno stile a tutti gli input che sono type="text"o type="password".

In alternativa, mi accontenterei di tutti gli input dove type != "checkbox".

Mi sembra di doverlo fare:

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

Non c'è un modo per fare:

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

o

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

Ho dato un'occhiata in giro e non sembra che ci sia un modo per farlo con un singolo selettore CSS.

Non è un grosso problema ovviamente, ma sono solo un gatto curioso.

Qualche idea?

Risposte:


183

CSS3 ha una pseudo-classe chiamata : 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>


Selettori multipli

Come ha detto Vincent, è possibile mettere :not()insieme più s:

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

CSS4, che non è ancora ampiamente supportato , consente più selettori in un file:not()

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


Supporto legacy

Tutti i browser moderni supportano la sintassi CSS3. Al momento in cui è stata posta questa domanda, avevamo bisogno di una soluzione alternativa per IE7 e IE8. Una possibilità era quella di utilizzare un polyfill come IE9.js . Un altro era sfruttare la cascata in 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!
} 

1
Ben fatto! Grazie. quel selettore CSS3 è completamente supportato? (Mi interessa solo IE7 +, FF3 +, Safari recente, Chrome recente)
RPM1984

1
È supportato in IE9 + e tutti gli altri browser moderni. quirksmode.org/css/contents.html#t37
Patrick McElhaney

12
Per ragioni di completezza, se vuoi fare più "non", questa è la sintassi da usare: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent

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

Questo è il modo corretto per farlo. Purtroppo CSS non è un linguaggio di programmazione.


4
Tuttavia, potresti usare Less CSS o Sass.
vbullinger

Meno, sì! Lo adoro.
Bartłomiej Zalewski
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.