碗形下划线或输入边框

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可以让你产生这种强调效果：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

您可以使用:after和:before伪元素执行此操作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

生成响应碗状下划线的方法，无论是否应用于元素上的填充，都不需要修改，使用linear-gradient作为背景图像。它们可以在像素值中被赋予background-size并位于元素的底部。

方法本身很简单：

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

注意：在浏览器支持方面，Box shadow优于此方法。这只是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">