Aprender a diseñar formas con CSS es una gran manera de mejorar el aspecto de su sitio web. Los formularios HTML están entre las cosas más feas en la mayoría de las páginas web. A menudo son aburridos y utilitarios y no ofrecen mucho en el sentido del estilo.
Con CSS, eso puede cambiar. La combinación de CSS con las etiquetas de formulario más avanzadas puede proporcionar unos formularios de aspecto agradable.
Cambiar los colores
Al igual que con el texto, puede cambiar los colores de primer plano y de fondo de los elementos del formulario. Una manera fácil de cambiar el color de fondo de casi todos los elementos del formulario es usar la propiedad de color de fondo en la etiqueta de entrada. Por ejemplo, este código aplica un color de fondo azul (#9cf) en todos los elementos.
input {
>inputcolor de fondo : #9cf;
color #000;
}
Para cambiar el color de fondo sólo de ciertos elementos del formulario, simplemente añada "textarea" y seleccione el estilo. Por ejemplo:
input, textarea, seleccione {
.color de fondo : #9cf;
color #000;
}
Asegúrese de cambiar el color del texto si hace que su color de fondo sea oscuro. Los colores contrastantes ayudan a hacer que los elementos de la forma sean más legibles. Por ejemplo, el texto en un color de fondo rojo oscuro es mucho más fácil de leer si el color del texto es blanco. Por ejemplo, este código coloca texto blanco sobre fondo rojo.
input, textarea, seleccione {
.color de fondo : #c00;
color #fff;
}
Incluso puede poner un color de fondo en la etiqueta del formulario. Recuerde que la etiqueta del formulario es un elemento de bloque, por lo que el color rellena todo el rectángulo, no sólo las ubicaciones de los elementos. Puede añadir un fondo amarillo a un elemento de bloque para que el área destaque, de esta manera:
form {
color de fondo : #ffc;
}
Agregar bordes
Al igual que con los colores, puede cambiar los bordes de varios elementos de formulario. Puede añadir un solo borde alrededor de todo el formulario. Asegúrese de añadir relleno, o sus elementos de forma se atascarán justo al lado del borde. He aquí un ejemplo de código para un borde negro de 1 píxel con 5 píxeles de relleno:
form {
borde : 1px sólido #000;
acolchado: 5px;
}
Puede poner bordes alrededor de algo más que el formulario en sí mismo. Cambie el borde de los elementos de entrada para que destaquen:
input {
>inputborder : 2px guión #c00;
}
Tenga cuidado cuando ponga bordes en los cuadros de entrada, ya que se parecen menos a los cuadros de entrada en ese momento, y es posible que algunas personas no se den cuenta de que pueden rellenar el formulario.
Combinar características de estilo
Al combinar los elementos de su formulario con el pensamiento y algo de CSS, puede crear un formulario de aspecto agradable que complemente el diseño y la disposición completa de su sitio.
