html – 输入带有半高的边框

前端之家收集整理的这篇文章主要介绍了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" />

猜你在找的HTML相关文章