输入上的碗式下划线或边框

Question

我有一个底部只有边框的输入字段，现在我需要在输入的左右两侧创建一条小线。描述起来有点困难，所以我举个例子：

input {
  background-color: transparent;
  height: 20px;
  padding: 10px 10px 1px;
  
  border: 0;
  border-bottom: 1px solid red;
}

<input type="text" placeholder="Example">

Fiddle

这是我的：

这就是我需要的样子：

Answer 1

在输入中使用多个box-shadows可以让你有这样的下划线效果：

input {
  height:20px;
  padding:0 5px;
  border: 0;  
  box-shadow: -9px 9px 0px -7px red, 9px 9px 0px -7px red;
  width:300px;
}

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

sbox-shadow 的 spread radius and the X/Y offset 需要根据输入的高度进行调整，如您在本例中看到的更高输入所示：

input {
  height:20px;
  padding:10px 5px;
  border: 0;  
  box-shadow: -18px 18px 0px -17px red, 18px 18px 0px -17px red;
  width:300px;
}

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

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

Answer 2

您可以使用 :after and :before 个伪元素来做到这一点。

.field {
  display: inline-block;
  position: relative;
}

input {
  background-color: transparent;
  padding: 3px 5px;
  border: 0;
  border-bottom: 2px solid red;
}

.field:before, .field:after {
  content: "";
  position: absolute;
  height: 7px;
  bottom: 0;
  background: red;
  width: 2px;
}

.field:before {
  left: 0;
}

.field:after {
  right: 0;
}

<div class="field">
  <input type="text" placeholder="Example">
</div>

Answer 3

生成响应式碗形下划线的一种方法是使用 linear-gradient 作为背景图像，而无需修改该下划线而无需考虑元素上应用的填充。它们可以在像素值中给出 background-size 并位于元素的底部。

方法本身相当简单：

我们使用 1px 厚度的 border-bottom 来制作底部边框。
向元素添加了一个线性渐变，其中 2px 为红色，其余为透明，并位于元素的底部。
background-size设置决定左右边框的高度。在代码片段中，我将背景大小设置为 100% 5px，因此 5px 将是左右边框的固定高度。通过仅修改此参数，可以增加或减少它们的高度。
background-repeat 的设置使得背景图像在 x-axis 中重复，通过为 background-position 设置 1px 的负偏移，我们确保只有第一个的 1px渐变图块的红色边框显示在左侧。由于我们打开 repeat-x 而 background-size 仅为 100%，x-axis 中的第二个图块将从右侧结束前 1px 开始，因此这将产生 1px 边框在右侧。

注意： 框阴影在浏览器支持方面优于此方法。这只是IE10+.

input {
  background-color: transparent;
  height: 20px;
  width: 300px;
  padding:10px 5px;
  border: 0;
  border-bottom: 1px solid red;
  background-image: linear-gradient(to right, red 2px, transparent 2px);
  background-repeat: repeat-x;
  background-size: 100% 10px;
  background-position: -1px 100%;
}

input:nth-child(2) {
  padding: 0 5px;
}

input:nth-child(3) {
  padding: 10px 10px 1px;
}
input:nth-child(4) {
  height: 20px;
  padding: 10px 10px 1px;
}

<!-- prefix free library is optional and is only to avoid browser prefixing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<input type="text" placeholder="Example">
<br/>
<input type="text" placeholder="Example2">
<br/>
<input type="text" placeholder="Example3">
<br/>
<input type="text" placeholder="Example4">

输入上的碗式下划线或边框

Bowl-style underline or border on input

html

css

border

css-shapes