Is it possible to remove a bottom border on input textfield, under the new char?

Question

I just received this visual design:

CLG is a label tag, while the line is an input type=tel Just ignore the purple overlay...

The designer asks me to remove the border as the user types a new number.

Is that possible?

Answer 1

It is definitely possible, however it includes

• JavaScript (for checking the current input size)
• Flexbox (for auto-shrinking the border)

The idea is basically to mimick the border with a :after pseudo-element and shrink it to the remaining width of the <label>.

// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
[].forEach.call(document.querySelectorAll('input'), function(element) {
  element.addEventListener('input', function() {
    element.size = element.value.length;
  });
});

label {
  display: flex;
  align-items: stretch;
  font-weight: bold;
}
label:after {
  content: '';
  display: block;
  width: 100%;
  border-bottom: 1px solid gray;
}
input {
  display: block;
  border: none;
}

<form>
  <label>CLG <input type="tel" size="1"></label>
</form>

Answer 2

Instead of input element, I used a div element with contenteditable property.

.wrapper {
    border-bottom: 1px solid black;
    width: 250px;
    height: 25px;
    white-space: nowrap;
}
.wrapper > div {
    display:inline-block;
    vertical-align: middle;
    height: 100%;
}
.text {
    position: relative;
    min-width:10px;
}
.text:after {
    content:"";
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    top: -1px;
    bottom: -1px;
    left: 0px;
    width: 100%;
    position: absolute;
}
.text:focus {
    outline: none;
}

Working Fiddle