0

Estoy intentando hacer un campo numerico separando cada numero en cada linea de la siguiente forma:

.input-numb{
    letter-spacing: 30px;
    border: 0;
    outline: 0;
    background: transparent;

    background-image: linear-gradient(to right, black 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 40px 1px;
    background-repeat: repeat-x;
}

<input type="text" maxlength="4" class="input-numb">

introducir la descripción de la imagen aquí

No logro centrar en cada linea en el texto?

Si hay alguna mejor manera de hacerlo agradezco.

1
  • Utiliza px en vez de % en el background-image. Añade background-position:bottom left esto hará que empiece las líneas desde el principio. Añade padding-left:5px esto alineará el 1º Número. Añadele un width ya que cuando le pongas background-position:bottom left se verá una nueva línea. Y por último utiliza el DevTools de tu navegador para ajustarlo bien utilizando el letter-spacing y los px de background-image. A mi se me ha alineado con font-size:16px;width:140px;letter-spaccing:31.4px;background-image:...20px....0px;background-position:bottom left
    – Jose
    Commented el 14 nov. 2019 a las 1:52

1 respuesta 1

1

Creo que esto es lo que buscabas, simplemente si quieres añadir más o menos líneas tienes que jugar con la propiedad width

.input-numb-2 {
display: block;
  border: none;
  width: 5.5ch;
  background: 
    repeating-linear-gradient(90deg, 
        dimgrey 0, 
        dimgrey 1ch, 
        transparent 0, 
        transparent 1.5ch) 
      0 100%/100% 2px no-repeat;
  color: dimgrey;
  font: 5ch consolas, monospace;
  letter-spacing: .5ch;
}
<input type="text" class="input-numb-2" value="2345">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.