html - 带半高边框的输入

Question

我需要创建一个带有底部边框的输入文本框，左右两侧的边框应占输入高度的一半。

有没有一种简单的方法可以在 CSS 中设计它？

图片如下:

Answer 1

也许这是一个优雅的解决方案。

如果你使用背景，那么你可以非常好地指定发生了什么，它会稍微提高可读性。

input[type="text"] {
  padding: 10px;

  background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  background-size: 1px 20%, 100% 1px, 1px 20%;
  background-position: bottom left, bottom center, bottom right;
  background-repeat: no-repeat;

  border: none;
  color: #999;
}

<input type="text" />