I have a problem with my search bar

When the user clicks on it, it expands with a simple animation in order to allow the user to write, and it should play the animation backwards if the user clicks on another part of the page. The problem is that, if there is no text, the animation doesn't play backwards, it simply goes back to default size, as you can see in the gif below.

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" ></div>

CodePudding user response：

You can see in here

I apply .searchbar background-color: transparent;

*,
*::before,
*::after {
  box-sizing: border-box;
}



body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
}

.container{
  width:50vw;
  height: 12.5vh;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  background-color: whitesmoke;
  border-radius: 4rem;
}

.searchbar {
  margin-right: 1rem;
  display: block;
  border-top-right-radius: 4rem;
  border-bottom-right-radius: 4rem;
  width: 10%;
  height: 4rem;
  outline: none; 
  border:0; 
  outline:0; 
  background-image: url('https://external-content.duckduckgo.com/iu/?u=http://assets.stickpng.com/thumbs/585e4ad1cb11b227491c3391.png&f=1&nofb=1'); 
  background-position: right; 
  background-repeat: no-repeat; 
  background-size: contain; 
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  cursor: pointer;
  background-color: transparent;
  font-size:2rem;
}

.searchbar:focus {
  width: 50%;
  background-color: #E0FFFF;
  border-radius: 4rem;
  text-indent: 10px;
  cursor: auto;
}

<div >
      <input type="text"  id="searchbar" />
</div>

CodePudding user response：

your codes work Properly . and you can see at below ( i add border to see that ).
but your problem is because the transition: width 0.2s ease-in-out is set forwidth property only , set transition: all 0.2s ease-in-out for better view.

.searchbar {
  border : 1px solid;
    margin-right: 10%;
    width: 10%;
    height: 50%;
    outline: none;
    outline:0;
    background-image: url('search.png');
    background-position: right; 
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
  border-radius: 20px;
  
}

.searchbar:focus {
  width: 90%;
  background-color: red;
  border-radius: 20px;
  text-indent: 10px;
  cursor: auto;
}

<input type="text" ></div>