Utilize background and gradient effects as shown in the following examples:
.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" >
To get rid of padding on left and right precisely, consider using background-origin/background-clip properties like this:
.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" >
An alternative approach using 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 may also explore the use of 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" >
Here's another concept involving gradients:
.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" >