Este es el weblog de Horacio Bella donde se tratan temas relacionados a internet, comunicación, diseño y algunas cosas más. Si lo deseas puedes ponerte en contacto conmigo o seguir lo que voy escribiendo mediante el feed del sitio.

Gran Impetu


Fecha del Post
Septiembre 10, 2007 ~ Permalink

Dandole estilo a los diferentes tipos de input

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.

Post

1 ~ Alberto #

Muchas gracias por comentar esto :) había buscado la forma hace unas horas ya que también lo hacia dándole un ID a cada tipo :p

Saludos.


2 ~ Carnalito #

Esta bueno el dato pero como siempre IE dando lata no funciona en IE.



RSS ~ Discusión en esta entrada

Puedes seguir los comentarios que se van realizando en esta entrada mediante el feed correspondiente para la misma y también puedes enterarte de todas los respuestas que se realizan en el blog por medio del feed de los comentarios.

Gracias Matt por estos 10,682 favores.



Realizar comentario






Navbar