Design a input box with extended lines - html

Question

I am trying to code an input box like in the image below.
However, I only end up with part of the lines with the current code.
When it's a button rather than an edit, everything in fine.
.sidebar-search input {
display: inline-block;
border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
border-style: solid none solid solid;
border-width: 2px 0 2px 0px;
color: #ffd717;
padding: 15px 25px;
position: relative;
overflow: hidden;
}
.sidebar-search input::before,
.sidebar-search input::after {
content: '';
width: 2px;
height: 160%;
position: absolute;
top: -30%;
background-color: #FFD717;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 9999;
}
.sidebar-search input::before {
left: 10%;
}
.sidebar-search input::after {
right: 10%;
}
<div class="right-sidebar-area">
<div class="single-right-sidebar">
<div class="sidebar-search">
<input type="text" name="Search">
</div>
</div>
</div>

Answer 1

You are very close. It looks like ::before and ::after pseudo-selectors don't work for input elements, so apply it directly to sidebar-search and add more styles to that div
.sidebar-search {
/*specify positioning, height and width */
position: relative;
height: 50px;
width: 175px;
}
.sidebar-search input {
display: inline-block;
border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
border-style: solid none solid solid;
border-width: 2px 0 2px 0px;
color: #ffd717;
padding: 15px 25px;
position: relative;
top: 5px;
overflow: hidden;
}
.sidebar-search::before,
.sidebar-search::after {
content: '';
width: 2px;
height: 160%;
position: absolute;
top: -30%;
background-color: #FFD717;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 9999;
}
.sidebar-search::before {
left: 10px; /*these values are more accurate according to the picture */
}
.sidebar-search::after {
right: 10px; /*these values are more accurate according to the picture */
}
<div class="right-sidebar-area">
<div class="single-right-sidebar">
<div class="sidebar-search">
<input type="text" name="Search">
</div>
</div>
</div>