Hi how do I make this search bar work as the animation took place

Question

I want the animation to be in side the search bar.
https://code.sololearn.com/WqkT58hGqa81/?ref=app

Answer 1

You used different divs for blinking box and text. If you want it to be the same then you have to adjust them using display: absolute or display: flex
Or here is the better way.
Use JavaScript and change input value of the box. And swipe out text div at all.
This way you avoid many headaches

Answer 2

at your css .typing rules, replace:

border-right:3px solid;

by:

border-right:2px solid;
border-bottom:2px solid;
padding:2px 2px 2px 4px;

and add these rules:

div.typing {
position:relative;
}
.search-box {
position:absolute;
top:0;
left:0;
}
.search-box input {
background:transparent;
}

at your html, add this event attribute to input tag (hide the animated text when user type something inside):

oninput="this.style.background = this.value ? 'white' : '';"

Answer 3

Han go in previous answer edited input event attribute content, to be shorter and better (don't hide partial blinking border) ^^

Answer 4

Thanks everyone