0
404
Viewsinput 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.
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>
·
Santiago Trujillo
2 answers
Answer question0
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>
·
Santiago Trujillo
Report
0
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>
·
Santiago Trujillo
Report
Answer question