nachopro yendo de la cama a la compu…

Decorando tags input dependiendo su tipo con CSS

Hace un tiempo lo había visto por ahí y hoy lo volví a nacesitar, Obviamente no me acordaba cómo era

Cuando uno le toma la mano a la maquetación mediante CSS se vuelve un fanático y dependiente de esta tecnología y lo lleva a puntos tales como querer pintar la pared de su casa mediante código (?), bueno, menitra Voy al grano.

Al momento de decorar un elemento input mediante CSS sólo se acude a algo como input { width: 350px; background: #0f0f0f; } y al refrescar el explorador para ver el resultado se da cuenta que todos los campos del formulario, menos el textarea claro, tienen un ancho de 350 pixeles y su fondo es color #0f0f0f (?). Seguramente este no es el resultado deseado.

Se puede solucionar mediante formas no santas, como ponerle una clase a cada elemento o cosas semejantes que coartan la gracia del CSS. Por eso hoy les mostraré cómo acceder a cada campo según su tipo:

input[type="text"]
{
	width: 400px;
	/* Sólo afecto a los campos de texto */
}

input[type="submit"]
{
	border: 1px dashed;
	/* Sólo afecto a los botones de envío */
}

input[type="password"]
{
	color: white;
	/* Sólo afecto a los campos de contraseñas */
}

Y así toda la vida, con los diferentes tipos de campos input que hay

Espero que les resulte útil, un saludo! Ah, ya hice el administrador de comentarios, así que si me firman me voy a enterar y les voy a poder dar una respuesta