碗式输入下划线或边界

我有一个底部只有一个边框的输入域，现在我需要在输入的左侧和右侧创建一条小线。这是一个比较难形容，所以我会用一个例子：碗式输入下划线或边界

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

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

Fiddle

这是我有：

这是我需要它看起来像：

来源

2016-01-23 Duncan Luk

输入使用多个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" />

S盒阴影的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+。

来源

2016-01-23 11:24:16

是否有可能改变行'1px'的宽度是多少？另外，当我在填充的输入上使用它时，边上的线会变得太长。有可能给这些固定的高度吗？ –

@Duncan您需要调整盒子阴影的扩展半径和Y偏移量，以使左右线达到所需的高度。不幸的是，它们的高度将根据输入的高度而改变。我会再举一个例子。 –

[我的意思是一个例子]（https://jsfiddle.net/38f5ygpe/1/） –

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

来源

2016-01-23 11:48:20

以产生响应碗状下划线其不需要被修饰无关，其在元件上施加了填充的一种方法是使用如linear-gradient背景图像。它们可以以像素值给出background-size，并位于元素的底部。

的做法本身是相当简单：

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

注意：在浏览器支持方面，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">

来源

2016-01-23 12:15:35 Harry

碗式输入下划线或边界

回答

相关问题