how to give input border left and right small length - html

Question

I need to display the input field and i need give border bottom , left and right. But here i want only small portion border left side and right side.
.solid {
border-style: solid;
border-left-style: dashed;
border-top: none;
border-right-style: dashed;
}
<input class="solid">

Answer 1

You can use box-shadow to create this type of border.
input {
width: 300px;
border: none;
margin: 50px;
height: 35px;
box-shadow: 13px 13px 0px -10px #000000, -13px 13px 0px -10px #000000;
outline: none;
font-size: 22px;
background: none;
}
<input type="text">

Answer 2

Here you go. I had to add a div element outside the input field to use the before and after selectors.
.field {
position: relative;
display: inline-block;
}
.solid {
border: none;
border-bottom: 2px solid #000;
padding: 5px;
}
.solid:focus {
outline: none;
}
.field::after {
content: '';
width: 2px;
height: 10px;
position: absolute;
background: #000;
bottom: 0;
right: 0;
}
.field::before {
content: '';
width: 2px;
height: 10px;
position: absolute;
background: #000;
bottom: 0;
left: 0;
z-index: 1;
}
<div class="field">
<input class="solid" type="text">
</div>

Answer 3

Here is how you can give input border left and right of small length
Html
<input type="text">
CSS
input[type="text"] {
padding: 20px;
background: linear-gradient(#000, #000), linear-gradient(#000, #000),linear-gradient(#000, #000);
background-size: 1px 20%, 100% 1px, 1px 20%;
background-position: bottom left, bottom center, bottom right;
background-repeat: no-repeat;
border: none;
color: #999;
}
Find the working fiddle
Reference

Answer 4

html,body,input {
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}
.input-block {
position: relative;
width: 216px;/* important to define input width;width of input + 2x padding*/
margin: 0 auto;
}
input {
width: 208px;
padding: 0 4px;
outline: none;
border-bottom: 1px solid black;
}
.input-lr-border {
position: absolute;
width: 1px;
background-color: black;
bottom: 0;
height: 4px;
}
.left-border-input {
left: 0;
}
.right-border-input {
right: 0;
}
<div class="input-block">
<div class="left-border-input input-lr-border"></div>
<input/>
<div class="right-border-input input-lr-border"></div>
</div>

Answer 5

li{
list-style: none;
width: 200px;
border-bottom: 2px solid #000;
position: relative;
padding: 2px 5px;
margin: 0 0 10px;
}
li:before, li:after{
background: #000;
content: '';
position: absolute;
bottom: 0;
width: 2px;
height: 5px;
}
li:before{
left: 0;
}
li:after{
right: 0;
}
input{
border:0;
outline: none;
}
<ul>
<li><input type="text" placeholder="First Name" /></li>
<li><input type="text" placeholder="Last Name" /></li>
<li><input type="text" placeholder="Email" /></li>
</ul>