在输入中以一定宽度添加线条或边框底部 [英] Adding line or border bottom inside the input with some width

问题描述

我有一个输入，它周围有1px实心＃000边框，在输入内部我需要有一定宽度的黑色线条，到目前为止，我尝试添加border-bottom：5px实心＃000，但是我需要输入中的黑线有一定宽度，我应该怎么做？

I have an input, with 1px solid #000 border around it, inside the input I need to have line black with some width in it, so far I tried adding border-bottom: 5px solid #000, but I need to have some width in the black line inside the input, how I suppose to do that?

.form-control{
padding: 15px 20px;
border: 1px solid #000;
border-bottom: 5px solid black;
}

<input type="text" class="form-control" name="text" value="text"/>

推荐答案

使用背景和渐变

.form-control {
  padding: 15px 20px;
  border: 1px solid #000;
  background: 
    linear-gradient(black, black) 
    bottom/ /* Position */
    80% 5px /* Width height */ 
    no-repeat;
}

<input type="text" class="form-control" name="text" value="text" >

如果要完全删除padding-left-right，可以考虑 background-origin / background-clip 如下：

If you want to exactly remove padding-left-right you can consider background-origin/background-clip like below:

.form-control {
  padding: 15px 20px;
  border: 1px solid #000;
  background: 
    linear-gradient(black, black) 
    bottom -15px left 0/ /* Position */
    100% 5px /* Width height */ 
    content-box padding-box /* background-origin background-clip*/
    no-repeat;
}

<input type="text" class="form-control" name="text" value="text" >

或使用 calc（）

.form-control {
  padding: 15px 20px;
  border: 1px solid #000;
  background: 
    linear-gradient(black, black) 
    bottom/ /* position */
    calc(100% - 2*20px) 5px /* Width height */ 
    no-repeat;
}

<input type="text" class="form-control" name="text" value="text" >

您也可以考虑框阴影

.form-control {
  padding: 15px 20px;
  border: 1px solid #000;
  box-shadow:
    20px  0 0 #fff inset,
    -20px 0 0 #fff inset,
     0 -5px 0 #000 inset;
}

<input type="text" class="form-control" name="text" value="text" >

另一个带有渐变的想法：

Another idea with gradient:

.form-control {
  padding: 15px 20px;
  border: none;
  border-bottom:5px solid transparent;
  border-image:
    linear-gradient(to right, transparent 20px,#000 20px calc(100% - 20px),transparent 0) 5;
  box-shadow:0 0 0 1px #000;
}

<input type="text" class="form-control" name="text" value="text" >

这篇关于在输入中以一定宽度添加线条或边框底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！