How can I make my input box outline disappear? - html

Question

When I hover on the button, it shows the input box (shown in picture number 1) My code is written like this:
.search-btn{
position: relative;
top: 30%;
left: 30%;
transform: translate(-50%,-50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
.fa{
box-sizing: border-box;
padding: 10px;
width: 42.5px;
height: 42.5px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
.search-btn:hover{
width: 200px;
cursor: pointer;
}
.search-btn:hover .search-txt {
display: inline-block;
}
.search-txt {
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 50px;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.search-btn:hover .fa{
background: #941313;
color: white;
}
The only way I can get rid of the border is if I remove the {display: inline-block} in the search-btn:hover .search-txt and add {border:none} and etc. But then that completely gets rid of the input box itself and I can't write anything in it (shown in picture 2)
What am I doing wrong?? Thank you for the help in advance.
By the way, my html is written like this (all inside the header)
<nav>
<ul>
<li>About</li>
<li>Stories</li>
<li>
Resources and Campaigns
</li>
<li>Contact</li>
<li><div class="search-btn">
<input class="search-txt" type="search" name="" placeholder="Type to search">
<i class="fa fa-search"></i>
</div>
</li>
</ul>
</nav>

Answer 1

You need to use border:none; Replace your .search-txt css with this
.search-txt {
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 50px;
display: none;
font-size: 1em;
border: none;
padding: 0 20px;
}

Answer 2

Isaac you can add following class after your class .search-txt
.search-txt input{
border: none !important;
border-style: none;
padding:10px 5px;
margin:0px 0px;
}