Dandole estilo a los diferentes tipos de input
publicado el 10.09.07 en Diseño
Sabido es que el formato de los formularios por defecto es bastante aburrido, por lo que particularmente yo, y no creo ser el único, tiendo a modificarlos, darles otro borde, otra tipografía, background, etc. Un pequeño problema que surge es el de tratar de darle diferentes formatos a los distintos tipos de input.
Los tipos de input son: text, password, checkbox, radio, submit, image, reset, button, hidden y file. Los establecemos colocando <input type="text">.Obviamente no queremos que el input donde se introduce el texto y en el clickeamos para realizar el envío sean iguales, por lo que debemos aplicar estilos diferentes en el CSS. Hasta hace poco, yo los colocaba dentro de span diferentes y les asignaba un ID a cada uno, pero obviamente esa no era la manera correcta de hacerlo, la cual ahora conozco.
Por ejemplo si queremos que el cuadro de texto tenga fondo amarillo claro y el boton para enviar el formulario tenga de fondo un color gris los diferenciamos de la siguiente manera en el CSS:
input[type="text"] {
background: #fffeec;
}
input[type="submit"] {
background: #ebebeb;
}Es decir, luego de especificar el tag colocamos entre corchetes la propiedad que las diferencia, es decir,
type="type" y a continuación el estilo que querramos. Puede sernos útil tambien para darle más interacción al formulario con el visitantes aplicando por ejemplo :hover o :focus.
- Relacionado: Sentido Web – Dando Estilos a los Formularios con CSS
- Relacionado: 456 Berea Street – Styling form controls with CSS

