Diseñar un campo de entrada como entradas particionadas

Existen numerosos métodos para crear una serie de campos de entrada particionados. Un método utiliza "espaciado entre letras" para separar caracteres dentro de un único campo de entrada. Además, los estilos de "imagen de fondo" y "borde inferior" pueden mejorar aún más la ilusión de múltiples campos de entrada.

Fragmento CSS

El siguiente código CSS demuestra cómo para crear el efecto deseado:

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline: none;
}

Implementación HTML

Para usar este CSS, simplemente agregue el siguiente código HTML a su página: