碗式下划线或边框输入 [英] Bowl-style underline or border on input

问题描述

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

I have an input field with only a border at the bottom, now I need to create a little line on the left and right of the input. It is a little hard to describe, so I will use an example:

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

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

a href =https://jsfiddle.net/38f5ygpe/3/ =nofollow noreferrer>小提琴

Fiddle

这是我有：

This is what I have:

这是我需要的样子：

This is what I need it to look like:

推荐答案

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

Using multiple box-shadows on the input can let you have this underlining effect:

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

=https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Values =nofollow>展开半径和X / Y偏移量的sbox-阴影需要根据输入的高度进行调整，您可以在此示例中使用更高的输入：

The spread radius and the X/Y offset of the sbox-shadow need to be tweaked according to the height of your input as you can see in this example with a higher input :

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

这篇关于碗式下划线或边框输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！