javascript - 是否可以删除新字符下输入文本字段的底部边框？

Question

我刚收到这个视觉设计:

CLG是一个label标签，而line是一个input type=tel 忽略紫色覆盖层...

当用户输入新数字时，设计师要求我移除边框。

这可能吗？

Answer 1

这绝对是可能的，但是它包括

• JavaScript(用于检查当前输入大小)
• Flexbox(用于自动缩小边框)

这个想法基本上是用 :after 模仿边框伪元素并将其缩小到 <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>