input field with underline under each character

Go to Source

See the Code
See it Full Page
See Details

Created [to answer a SO question](https://stackoverflow.com/questions/41658552/how-to-create-a-7-character-underline-input-text-field-in-html-and-cssscreensho/41661432#41661432). Try deleting and writing something else in the `input` field.

It uses [**the `ch` unit**](https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch) whose width is the width of the `0` character. It also assumes the font in the `input` field is a monospace one so that all characters have the same width.

So the width for every character is always `1ch`. The gap between the characters is taken to be `.5ch`. This is the value we set for `letter-spacing`. The `width` of the `input` is the number of characters times the sum between the letter width (`1ch`) and the gap width (`.5ch`). So that's `7*(1ch + .5ch) = 7*1.5ch = 10.5ch`.

We remove the actual `border` of the `input` and we set a fake one using a `repeating-linear-gradient`. The dash (`dimgrey`) goes from `0` to `1ch` and the gap (`transparent`) starts immediately after the dash and goes to `1.5ch`.

It's attached to the left and the bottom of the input – this is the `background-position` component (`0%` horizontally and `100%` vertically).

It spreads across the entire input horizontally (`100%`) and is `2px` tall – this is the `background-size` component of the `background`.

This Pen uses: HTML, SCSS, Babel, and Babel