How can I make my input box outline disappear?

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><a href="about.html">About</a></li>
          <li><a href="stories.html">Stories</a></li>
          <li>
            <a href="resources.html">Resources and Campaigns</a>
          </li>
          <li><a href="contact.html">Contact</a></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;
}