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

我刚刚收到这个视觉设计：

CLG是label标签，而行是input type=tel只需忽略紫色覆盖层...

设计师要求我在用户键入新号码时删除边框。

那可能吗？

---

这绝对有可能，但它包括在内

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>

---

我使用了具有contenteditable属性的div元素，而不是input元素。

.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;
}

工作小提琴

---

当然，（几乎）一切皆有可能。

$(function() {
  $('span').html($('input').val()); /* on page load */
  $('input').on('keyup', function() { /* on keyup */
    $(this).next('span').html($(this).val());
  });
});

input {
  border: 0;
  border-bottom: 5px solid red;
}
label {
  position: relative;
}
span {
  position: absolute;
  left: 31px;
  top: 19px;
  height: 5px;
  overflow: hidden;
  color: white;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  CLG
  <input type="text" value="0123" />
  <span></span>
</label>

链接地址: http://www.djcxy.com/p/87109.html

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

下一篇: ContentInset set wrong when dismissing view controller in iOS