FORMULARIOS CON CSS

USANDO ESTILOS CON CSS EN FORMULARIO HTML

APLICAR ESTILOS A LOS CAMPOS DE ENTRADA

Utilice la propiedad width para determinar el ancho del campo de entrada.

A full-width input field

El ejemplo anterior se aplica a todos los elementos input. Si solo desea aplicar estilo a un tipo de entrada específico, puede utilizar selectores de atributos:

ENTRADAS ACOLCHADAS

Utilice la propiedad padding para agregar espacio dentro del campo de texto. Consejo: cuando tienes muchas entradas una tras otra, también puedes usar margin para agregar espacio exterior.

ENTRADAS CON BORDES

Utilice la propiedad border para cambiar el tamaño y color del borde, y border-radius para esquinas redondeadas.

Si solo desea un borde inferior, utilice la propiedad border-bottom:

BACKGROUND

Utilice background-color para agregar color de fondo y color para cambiar el color del texto.

ENTRADAS ENFOCADAS

Algunos navegadores agregan un contorno azul al enfocar un campo. Puede eliminarlo con outline: none;. Use :focus para aplicar estilos cuando el campo recibe el foco.

ICONO O IMAGEN EN LA ENTRADA

Use background-image y background-position para colocar un icono dentro del campo. Agregue padding-left para reservar espacio.

ENTRADA DE BÚSQUEDA ANIMADA

Use transition para animar el ancho de la entrada cuando recibe el foco.

ESTILOS A TEXTAREA

Use resize para evitar que se cambie el tamaño del área de texto.

ESTILOS A SELECT

ESTILOS A BOTÓN

RESPONSIVE FORM

Cambie el tamaño de la ventana para ver el efecto. Cuando la pantalla tenga menos de 600px, las columnas se apilan verticalmente.