Digamos que quieres un estilo elegante para tus entradas de texto:
Así que ve y diseña esas entradas:
input {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: rgba(255,255,255,0.5);
margin: 0 0 10px 0;
}Pero luego agrega algunas entradas más, una entrada de archivo y el botón de envío, y se pone triste porque no quería que esos estilos afectaran esos elementos.
Entonces eres como no-prob-bob, ¡solo me aseguraré de aplicar estilo a las entradas de texto!
input[type=text] {
/* Awesome styling */
}Pero luego te das cuenta de que mientras construyes tu formulario, quieres hacer uso de los nuevos tipos de entrada HTML5. Esos nuevos tipos de entrada significan una mejor accesibilidad, mejor soporte móvil y experiencias mejoradas del navegador de escritorio. Hay type=email, type=url, type=tel, type=number, type=color¡y mucho más! Esto se va a volver engorroso …
input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email], {
/* And that ain't all of them... */
}Qué vamos a hacer? Bueno, mi forma favorita sería aprovechar CSS3 y el :not() selector. Entonces, en lugar de incluir todos los tipos nuevos, excluimos los que no queremos que tengan estilo.
input:not([type=submit]):not([type=file]) {
/* omg so much cleaner */
}
Ahora ha vuelto al punto de partida (hoja de estilo del agente de usuario predeterminado) en esas otras entradas. No tenga miedo de usar los controles de formulario predeterminados del navegador, la gente los conoce y está acostumbrada a ellos.
Pero espera, pantalones calientes. IE no admite eso :not() selector hasta la versión 9, que aún no ha salido realmente. Sí, de hecho, y eso apesta. Sin embargo, si desea hacer un polyfix de ese sucka, puede hacerlo con un trabajo rápido de copiar y pegar.
<!--[if lt IE 9]>
<script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->Eso es de este proyecto que:
Ascender de categoría[s] MSIE5.5-8 para que sea compatible con los navegadores modernos.
¿No te interesa eso? Bueno, siempre puede enumerar todos los selectores de atributos como los enumeré anteriormente, lo que lo llevará de nuevo al soporte de IE7. O bien, puede volver a agregar nombres de clases en cada entrada y seleccionar por lo que debería llevarlo de regreso al comienzo de Internet.