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?

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!
} 

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.


4
Sin embargo, podrías usar Less CSS o Sass.
vbullinger

¡Menos, sí! Me encanta.
Bartłomiej Zalewski
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.