Selectores de tipo de entrada CSS - ¿Es posible tener una sintaxis "o" o "no"?

101

Si existen en programación),

Si tengo un formulario HTML con las siguientes entradas:

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

Quiero aplicar un estilo a todas las entradas que sean type="text"o type="password".

Alternativamente, me conformaría con todas las entradas donde type != "checkbox".

Parece que tengo que hacer esto:

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

¿No hay una manera de hacer?

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

o

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

Eché un vistazo y no parece que haya una manera de hacer esto con un solo selector de CSS.

No es gran cosa, por supuesto, pero solo soy un gato curioso.

¿Algunas ideas?

RPM1984
fuente

Respuestas:

183

CSS3 tiene una pseudoclase llamada : 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>


Selectores múltiples

Como mencionó Vincent, es posible encadenar varios :not()s juntos:

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

CSS4, que todavía no es ampliamente compatible , permite múltiples selectores en un:not()

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


Soporte heredado

Todos los navegadores modernos admiten la sintaxis CSS3. En el momento en que se hizo esta pregunta, necesitábamos una alternativa para IE7 e IE8. Una opción era usar un polyfill como IE9.js . Otro fue explotar la cascada 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!
} 
Patrick McElhaney
fuente
1
¡Buena esa! Gracias. ¿Ese selector CSS3 es totalmente compatible? (Solo me importa IE7 +, FF3 +, Safari reciente, Chrome reciente)
RPM1984
1
Es compatible con IE9 + y todos los demás navegadores modernos. quirksmode.org/css/contents.html#t37
Patrick McElhaney
12
En aras de la integridad, si desea hacer varios "no", entonces esta es la sintaxis que debe usar: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent
25
input[type='text'], input[type='password']
{
   // my css
}

Esa es la forma correcta de hacerlo. Lamentablemente, CSS no es un lenguaje de programación.

codemonkeh
fuente
4
Sin embargo, podrías usar Less CSS o Sass.
vbullinger
¡Menos, sí! Me encanta.
Bartłomiej Zalewski