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.

• Lunes 10 de Septiembre de 2007 a las 20:10 ~ Translate to english
• Categorías ~ Diseño
• 2 comentarios realizados ~ Enlaces a esta entrada
• Digg ~ Menéame ~ del.icio.us ~ Fresqui ~ Mister Wong
• Enlazar este post ~
• Enlace corto ~
• ← Utilizando la etiqueta title en Wordpress
• Crece el teletrabajo y el freelance →