输入框下方或周围的碗状下划线或边框

Question

我有一个只有底部边框的输入框，现在我需要在输入框的左右两侧创建一条小线。这有点难以描述，因此我将使用一个例子：

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

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

点此查看在线示例

这是目前的样子：

这是我需要的效果：

- Duncan Lukkenaer

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

的扩散半径和X/Y偏移量需要根据您输入框的高度进行微调，如下面这个更高的输入框示例所示：

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的浏览器支持为IE9+。

- web-tiki

---

能否将线的宽度更改为 1px？另外，当我在带有填充的输入框上使用时，侧边的线会变得太长。是否可以给这些线一个固定的高度？ - Duncan Lukkenaer

@Duncan，你需要调整盒子阴影的扩散半径和Y轴偏移量，以使左右两条线达到所需的高度。不幸的是，它们的高度将根据输入框的高度而改变。我会再做一个例子。 - web-tiki

这是一个我所说的例子：https://jsfiddle.net/38f5ygpe/1/ - Duncan Lukkenaer

@Duncan 我在我的回答中添加了一个示例。对于你的示例，它应该是这样的 https://jsfiddle.net/38f5ygpe/4/ - web-tiki

Answer 2

你可以使用:after和: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>

- Nenad Vracar

Answer 3

使用线性渐变作为背景图像可以生成一个响应式的碗形下划线，无需修改元素上应用的填充。它们可以被赋予像素值的background-size并定位在元素底部。

这种方法本身非常简单：

- 我们使用1像素厚度的border-bottom来生成底部边框。 - 添加一个线性渐变，其中2像素为红色，其余为透明，并将其定位在元素底部。 - background-size设置确定左右边框的高度。在代码段中，我将背景大小设置为100% 5px，因此左右边框的固定高度为5像素。只需修改此参数即可增加或减少它们的高度。 - 设置background-repeat以使背景图像在x轴上重复，并通过将background-position的负偏移量设置为1像素，确保仅在左侧显示第一个渐变瓷砖的1像素红色边框。由于我们有repeat-x和背景大小仅为100%，所以x轴上的第二个瓷砖将从右侧自身的1像素之前开始，因此这将在右侧产生1像素的边框。

注意：相对于浏览器支持而言，盒子阴影优于此方法。这仅适用于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">

- Harry