Input css: personalizar estilos de campos de entrada en css

Actualizado : 2023-09-25

Los campos de entrada <input> son elementos fundamentales en cualquier formulario ya sea para recolectar información de los usuarios, permitir que los usuarios inicien sesión o para otros propósitos.

Este elemento es personalizables en términos de diseño y estilo como las demas etiquetas html. En este artículo, aprenderás personalizar los estilos de los inputs en CSS.

Como se selecciona el elemento input con css

el selector para agregar estilos a los campos de entrada con css es input y puedes personalizar el css de diferentes tipos de inputs ya sea agregando clases para diferenciar los elementos o accediendo a sus atributos desde css como en el siguiente código:

css

/* Esta línea selecciona todo los elementos input  */
input {
  /* ...... */
}

/*selecciona todos los elementos <input> que tienen un atributo type con el valor "text". */
input[type="text"] {
}
/*selecciona todos los elementos <input> que tienen un atributo type con el valor "password". */
input[type="password"] {
}

/*selecciona todos los elementos <input> que tienen un atributo type con el valor "date". */
input[type="date"] {
}

/* selecciona todos los elementos <input> que tienen un atributo type con el valor "datetime". */
input[type="email"] {
}
/* .................... */
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
}

Ejemplo de css en un input

Bien a continuación tienes un pequeño ejemplo de como mejorar el diseño de un campo de entrada utilizando css, ten en cuenta que puedes jugar con los estilos y conseguir diseños increíbles.

html

<div>
  <input type="text" />
  <input type="password" />
  <input type="email" />
</div>

css

input {
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #a1d1f5;
  color: #64696d;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  margin-bottom: 30px;
}

/* Solo el campo de tipo email tendrá un background diferente */
input[type="email"] {
  background-color: #a1aaf5;
}

Personalización avanzada de campos de entrada

Puedes aplicar muchos otros estilos personalizados, como la sombra, los bordes redondeados y los efectos de transición. Aquí hay algunos ejemplos:

Cambiar la apariencia del cursor

css

input[type="text"] {
  cursor: pointer;
}

Este código cambia la apariencia del cursor cuando se pasa sobre el input de texto. para este caso, el cursor se transforma en una mano que señala.

Agregar un efecto de transición

css

input[type="text"] {
  transition: border 0.3s ease-in-out;
}

input[type="text"]:focus {
  border: 1px solid blue;
}

Este código agrega un efecto de transición suave cuando se enfoca en el campo de entrada de texto. Cuando el input esta se enfocado, se agrega un borde sólido azul de 1 píxeles y se aplica una transición de 0,3 segundos con efecto ease-in-out.

Agregar sombra a un input con css

css

input[type="text"] {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Este código agrega una sombra  alrededor del input. */

Mejorar la apariencia de los input puede facilitar la usabilidad y accesibilidad de un sitio web para los usuarios.¡No dudes en experimentar con diferentes estilos y diseños para encontrar la solución perfecta para su página web!

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi