Having an issue with my search bar
When the user clicks on it, it's supposed to expand with a simple animation to allow typing, and should shrink back if the user clicks elsewhere on the page. However, the problem arises when there is no text entered, as the animation fails to play in reverse and simply reverts to its default size. Refer to the gif below for a visual depiction. https://i.sstatic.net/s0xDD.gif
CSS
.searchbar {
margin-right: 10%;
width: 20%;
height: 50%;
outline: none;
border:0;
outline:0;
background-image: url('search.png');
background-position: right;
background-repeat: no-repeat;
background-size: contain;
-webkit-transition: width 0.2s ease-in-out;
transition: width 0.2s ease-in-out;
cursor: pointer;
}
.searchbar:focus {
width: 90%;
background-color: #E0FFFF;
border-radius: 20px;
text-indent: 10px;
cursor: auto;
}
and the HTML
<input type="text" class="searchbar"></div>