'input text animation not working on focus out if there is no text

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. enter image description here

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>
javascripthtmlcss


Solution 1:[1]

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" class="searchbar"></div>

Solution 2:[2]

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%3A%2F%2Fassets.stickpng.com%2Fthumbs%2F585e4ad1cb11b227491c3391.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 class="container">
      <input type="text" class="searchbar" id="searchbar" />
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmad MRF
Solution 2

Related Questions