Aprender a diseñar formularios con CSS es una excelente manera de mejorar el aspecto de su sitio web. Las formas HTML son posiblemente 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 cuanto a estilo.
Con CSS, eso puede cambiar. La combinación de CSS con las etiquetas de formulario más avanzadas puede ofrecer algunos formularios atractivos.
Cambiar los colores
Al igual que con el texto, puede cambiar los colores de fondo y primer plano de los elementos de formulario. Una forma 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.
entrada { color de fondo: # 9cf; color: # 000;}
Para cambiar el color de fondo de solo ciertos elementos de forma, solo agregue textarea y seleccione el estilo. Por ejemplo:
input, textarea, select { color de fondo: # 9cf; color: # 000;}
Asegúrese de cambiar el color del texto si oscurece el color de fondo. Los colores contrastantes ayudan a hacer que los elementos de 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 el texto blanco sobre un fondo rojo.
input, textarea, select { color de fondo: # c00; color: #fff;}
Incluso puedes poner un color de fondo en la etiqueta del formulario. Recuerde que la etiqueta de formulario es un elemento de bloque, por lo que el color llena todo el rectángulo, no solo las ubicaciones de los elementos. Puede agregar un fondo amarillo a un elemento de bloque para que el área se destaque, como esto:
forma { color de fondo: #ffc;}
Añadir bordes
Al igual que con los colores, puede cambiar los bordes de varios elementos de formulario. Puede agregar un solo borde alrededor de todo el formulario. Asegúrese de agregar relleno, o los elementos de su formulario se atascarán justo al lado del borde. Aquí hay un ejemplo de código para un borde negro de 1 píxel con 5 píxeles de relleno:
forma { borde: 1px sólido # 000; relleno: 5px;}
Puede poner bordes alrededor de algo más que la forma en sí. Cambie el borde de los elementos de entrada para resaltarlos:
entrada { borde: 2px punteado # c00;}
Tenga cuidado al colocar bordes en los cuadros de entrada, ya que se parecen menos a los cuadros de entrada, y es posible que algunas personas no se den cuenta de que pueden completar el formulario.
Combina características de estilo
Al juntar los elementos de su formulario con pensamiento y algo de CSS, puede configurar un formulario atractivo que complemente el diseño y el diseño de su sitio.
