输入半高的边框 [英] Input with border for half height

问题描述

我需要创建一个带底边框的输入文本框，并且边框边框应该在左边和右边的输入框的一半高度。

在 CSS

中有一个简单的设计方法吗？

显示如下：

如果你使用background，那么你可以非常好地指定在哪里

  input [type =text] {padding：10px;背景：线性梯度（＃000，＃000），线性梯度（＃000，＃000），线性梯度background-size：1px 20％，100％1px，1px 20％; background-position：bottom left，bottom center，bottom right;背景重复：无重复; border：none; color：＃999;}  

 < input type = text/>  

I need to create an input text box with a bottom border and the side borders should span half the height of the input on left and right.

Is there an easy way to design this in CSS?

Image is show below:

解决方案

Maybe this could be an elegant solution.

If you use background then you can specify really nicely where what goes and it improves readability a bit.

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

这篇关于输入半高的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！