Estilizando um campo de entrada como entradas particionadas

Existem vários métodos para criar uma série de campos de entrada particionados. Um método utiliza "espaçamento entre letras" para separar caracteres em um único campo de entrada. Além disso, os estilos de "imagem de fundo" e "borda inferior" podem melhorar ainda mais a ilusão de vários campos de entrada.

Snippet CSS

O código CSS a seguir demonstra como para criar o efeito desejado:

#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;
}

Implementação HTML

Para usar este CSS, basta adicionar o seguinte código HTML à sua página: