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

Question

我刚收到这个视觉设计:

CLG是一个label标签,而线是一个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>