Question

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

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

图片显示如下： Input with border on half of it's height

Answer 1

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

如果您使用背景，那么您可以非常精确地指定其中的内容，并稍微提高可读性。

＆＃13;

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

＆＃13;

<input type="text" />

＆＃13;

Answer 2

使用2 box-shadows，您可以实现底部边框和两边的小边框。这是一个例子：

＆＃13;

input[type=text] {
  width:300px; height:17px;
  border: 0; outline:none;
  padding:0;
  box-shadow: -5px 5px 0px -4px #000, 5px 5px 0px -4px #000;
  text-align:center;
}

＆＃13;

<input placeholder="Email" type="text" value=""/>

＆＃13;

需要根据输入的高度和左/右边框的所需高度调整框阴影的spread radius and the X/Y offset。正如您在此示例中看到的那样，输入的高度不同：

＆＃13;

input {
  width:300px; height:40px;
  padding:0;
  border: 0; outline:none;
  box-shadow: -18px 18px 0px -17px #000, 18px 18px 0px -17px #000;
  text-align:center;
}

＆＃13;

<input placeholder="Email" type="text" />

＆＃13;

浏览器支持box-shadows is IE9+。

Answer 3

我会采用与 web-tiki 的答案略有不同的方法，并使用包装div和伪元素，因为这不需要固定的高度输入（但是需要这个额外的元素）：

＆＃13;

input {
  border: none;
}
div {
  display: inline-block;
  position: relative;
  margin-bottom: 30px;
}
div:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2px;
  height: 50%;
  width: 100%;
  border: 2px solid black;
  border-top: none;
}
textarea {
  display: block;
  height: 100px;
  /*border:none*/
  /*This was commented to show where text area is*/
}

＆＃13;

<div>
  <input type="text" placeholder="Please Enter your PIN" />
</div>

<br/>

<div>
  <textarea placeholder="Please Enter your bank details and mother's maiden name;)"></textarea>
</div>

＆＃13;

Answer 4

此线程中已存在基于linear-gradient的答案，但它有点复杂并且使用多个线性渐变来实现边框，但只能使用一个linear-gradient来完成。

在元素上使用border-bottom可以避免使用其中一个线性渐变。使用为2px（2 x所需边框宽度）着色的线性渐变，在X轴上重复并且在X轴上具有background-position的负偏移可以仅使用一个渐变而在左侧和右侧生成边框两个。负偏移等于边界的宽度（1px）。这意味着在左侧可以看到1px的渐变，并且由于渐变在X轴上重复（并且其大小仅为100％），因此右侧的1px边框由渐变的第二个tile生成。

这种方法的一些优点是：

它不需要任何额外的真实或伪元素。由于input元素是自闭合的，因此不能有伪元素，这意味着不需要额外的包装元素。
生成的边框具有响应性，即使input元素的尺寸发生变化，也可以自行调整。

一个缺点是只能从IE10 +支持linear-gradient背景图像。

＆＃13;

input[type="text"] {
  padding: 2px;
  background-image: linear-gradient(to right, black 2px, transparent 2px);
  background-repeat: repeat-x;
  background-size: 100% 50%;
  background-position: -1px bottom;
  border: none;
  border-bottom: 1px solid black;
  color: #999;
  text-align: center;
}
input[type="text"].padding {
  padding: 4px 10px;
}
.narrow {
  width: 100px;
}
.wide {
  width: 250px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" placeholder="Name" />
<input type="text" placeholder="Address" class="wide" />
<input type="text" placeholder="City" class="narrow" />
<input type="text" placeholder="Email" class="padding" />

＆＃13;

Answer 5

您可以使用伪元素：

input {
  position: relative;
  width: 200px;
  height: 18px;
  border: none;
  outline: none;
}
::-webkit-input-placeholder {
  text-align: center;
  text-transform: uppercase;
}
:-moz-placeholder {
  /* Firefox 18- */
  text-align: center;
  text-transform: uppercase;
}
::-moz-placeholder {
  /* Firefox 19+ */
  text-align: center;
  text-transform: uppercase;
}
:-ms-input-placeholder {
  text-align: center;
  text-transform: uppercase;
}
div {
  position: relative;
}
div::before {
  content: '';
  display: block;
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 204px;
  height: 9px;
  background-color: red;
}

<div>
	<input type="text" placeholder="email" />
</div>

输入带有半高的边框

5 个答案: