1

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?

enter image description here

.form-control{
padding: 15px 20px;
border: 1px solid #000;
border-bottom: 5px solid black;
}
<input type="text" class="form-control" name="text" value="text"/>
Udzzzz
  • 155
  • 9

2 Answers2

5

Use background and gradient for this:

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

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

Or use 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" >

You can aslo consider box-shadow

.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" >
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1
<div class="containerDiv">
    <input type="text" class="form-control" name="text" value="text">
     <div class="border"></div>
</div>


.containerDiv {
    width: 200px;
    position: relative;
}
div.border{
    border-bottom: 5px solid black;
    width: 80%;
    position: absolute;
    bottom: 1px;
    left: 0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
Adina E
  • 141
  • 6