带半高边框的输入

Question

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

在CSS中有没有简单的设计方法？

图片如下：

Answer 1

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

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

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

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

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

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

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

Answer 2

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

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*/
}

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

Answer 3

你可以使用伪元素:

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>

Answer 4

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

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

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

Answer 5

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

在元素上使用 border-bottom 避免了对其中一种线性渐变的需要。使用为 2px（2 x 所需边框宽度）着色的线性渐变，在 X 轴上重复并在 X 轴上具有 background-position 的负偏移量可以仅使用一个渐变在左右两侧产生边框两个。负偏移量等于边框的宽度 (1px)。这意味着 1px 的渐变在左侧可见，并且由于渐变在 X 轴上重复（并且其大小仅为 100%），因此右侧的 1px 边框由渐变的第二个图块产生。

这种方法的一些优点是：

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

一个缺点是 linear-gradient 背景图片仅支持 IE10+。

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

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

带半高边框的输入

Input with border for half height

html

css

border

css-shapes