Formularios de CSS

Al usar CSS, se puede mejorar enormemente el aspecto de los formularios HTML:

Prueba tu mismo

establecer el estilo del campo de entrada

Usar width propiedad para determinar el ancho del campo de entrada:

Ejemplo

input {
  width: 100%;
}

Prueba tu mismo

El ejemplo anterior se aplica a todos los elementos <input>. Si solo desea establecer el estilo para un tipo específico de entrada, puede usar un selector de atributo:

  • input[type=text] - seleccionará solo los campos de texto
  • input[type=password] - seleccionará solo los campos de contraseña
  • input[type=number] - seleccionará solo los campos de números
  • etc...

rellenar la caja de entrada

Usar relleno propiedad para agregar espacio dentro del campo de texto.

Consejo:Si hay muchos campos de entrada, es posible que necesite agregar márgenes adicionales para agregar más espacio alrededor de ellos:

Ejemplo

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Prueba tu mismo

Tenga en cuenta que hemos cambiado box-sizing propiedad se establece en border-boxde esta manera, se asegura de que el ancho y la altura totales del elemento incluyan los márgenes internos (relleno) y el borde final.

Por favor, en nuestra Box Sizing CSS en esta sección aprenderá sobre box-sizing conocimiento adicional sobre la propiedad.

cajas de entrada con borde

Utilice border propiedad para cambiar el grosor y el color del borde, y usar border-radius propiedad para agregar bordes redondos:

Ejemplo

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Prueba tu mismo

Si solo necesita una línea inferior, utilice border-bottom Atributo:

Ejemplo

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Prueba tu mismo

cajas de entrada de color

Utilice background-color propiedad para agregar un fondo de color al campo de entrada y usar color para cambiar el color del texto:

Ejemplo

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Prueba tu mismo

cuando el campo de entrada obtiene el enfoque

Por defecto, algunos navegadores añaden un contorno azul alrededor del cuadro de entrada cuando obtiene el enfoque (clic) outline: none; para eliminar este comportamiento.

Usar :focus El selector puede establecer un estilo para el campo de entrada cuando obtiene el enfoque:

Ejemplo 1

input[type=text]:focus {
  background-color: lightblue;
}

Haga clic en el cuadro de texto:

Prueba tu mismo

Ejemplo 2

input[type=text]:focus {
  border: 3px solid #555;
}

Haga clic en el cuadro de texto:

Prueba tu mismo

Caja de entrada con icono/imagen

Si desea incluir un icono/imagen en la caja de entrada, utilice La propiedad background-image y se asocia con La propiedad background-position Las propiedades juntas se establecen. Además, se debe prestar atención a que se agrega un margen izquierdo (padding-left) más grande para dejar espacio al icono:

Ejemplo

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Prueba tu mismo

Caja de entrada de búsqueda con animación

En este ejemplo, usamos CSS transition La propiedad establece una animación para el cambio de ancho al obtener el foco en la caja de entrada de búsqueda. Más tarde, en nuestro Transiciones CSS En este capítulo se aprende más sobre transition conocimiento de las propiedades.

Ejemplo

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Prueba tu mismo

Establecer el estilo del área de texto

Consejo:Usar resize La propiedad puede evitar que los textareas se ajusten en tamaño (deshabilitar el ‘griego’ en la esquina inferior derecha):

Ejemplo

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Prueba tu mismo

Establecer el estilo del menú de selección

Ejemplo

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Prueba tu mismo

Establecer el estilo de los botones de entrada

Ejemplo

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Sugerencia: usa width: 100% para lograr botones de ancho completo */

Prueba tu mismo

Para obtener más información sobre cómo configurar estilos de botones con CSS, aprende en nuestros Botones CSS Tutoriales.

Menú responsive

Ajuste el tamaño de la ventana del editor TIY para ver los efectos. Cuando el ancho de la pantalla sea menor de 600 píxeles, las dos columnas se apilarán verticalmente en lugar de horizontalmente.

Avanzado: Los siguientes ejemplos utilizan Consultas de medios Para crear un formulario responsive. En el próximo capítulo, aprenderás más sobre este tema.

Ver menú responsive