Formularios CSS

Un ejemplo de formulario, usamos CSS para renderizar los elementos de formulario HTML:

Estilos de entrada (input)

Usa la propiedad width para establecer el ancho del campo de entrada:

En el ejemplo anterior se establece el ancho de todos los elementos <input> al 100%. Si solo quieres establecer un tipo específico de campo de entrada, puedes usar los siguientes selectores de atributo:

• input[type=text]- Seleccionar campo de entrada de texto
• input[type=password]- Seleccionar campo de entrada de contraseña
• input[type=number]- Seleccionar campo de entrada numérico
• ...

Relleno de entrada

Usapaddingla propiedad para agregar relleno interno al campo de entrada.

Nota: hemos establecidobox-sizingla propiedad enborder-box. Esto asegura que el navegador muestre el campo de entrada con el ancho y la altura especificados, incluyendo el borde y el relleno interno en el cálculo.
Para más contenido, puedes leerTamaño de caja CSS3 。

Borde de entrada (input)

Usaborderla propiedad para modificar el tamaño o color del borde del input, y usaborder-radiusla propiedad para agregar esquinas redondeadas al input:

Si solo quieres agregar un borde inferior, puedes usarborder-bottomla propiedad:

Color de entrada (input)

Puedes usarbackground-colorla propiedad para establecer el color de fondo del campo de entrada,colorla propiedad se usa para modificar el color del texto:

Enfoque de entrada (input)

Por defecto, algunos navegadores muestran un contorno azul cuando el campo de entrada recibe el foco (al hacer clic en el campo). Podemos establecer el estilo del input enoutline: none;para ignorar este efecto.

Usa:focusel selector para establecer el estilo del campo de entrada cuando recibe el foco:

Icono de entrada (input)

Si quieres agregar un icono en el campo de entrada, puedes usarbackground-imagela propiedad y la propiedad de posicionamientobackground-position. Ten en cuenta establecer el margen izquierdo del icono para que tenga algo de espacio:

Cuadro de búsqueda con animación

El siguiente ejemplo usa la propiedad CSStransition, la cual hace que el campo de entrada se expanda hacia la derecha al recibir el foco. Puedes consultarel capítulo de CSS Animacionespara obtener más información.

Estilo del área de texto (textarea)

Nota:Usaresizela propiedad para deshabilitar la función de redimensionamiento del área de texto (generalmente se puede redimensionar arrastrando la esquina inferior derecha).

Estilo del menú desplegable (select)

Estilos de botones

Para más contenido, consulta nuestrotutorial de CSS Botones.

Formulario responsive

El formulario responsive puede reorganizar los elementos según el tamaño de la ventana del navegador. Podemos ver el efecto cambiando el tamaño de la ventana del navegador:

Avanzado:El siguiente ejemplo usaConsultas de medios CSS3para crear un formulario responsive.