html – 输入带有半高的边框

我需要创建一个带有底部边框的输入文本框,侧边框应该跨越左右两侧输入的高度的一半.

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

图片如下所示：

解决方法

也许这可能是一个优雅的解决方案.

如果您使用背景,那么您可以非常精确地指定它的位置,并且它可以提高可读性.

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

  background: 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" />