+ 1

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

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

13th Jul 2021, 4:07 AM
Han go
4 Answers
+ 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
13th Jul 2021, 4:27 AM
Shadoff
Shadoff - avatar
0
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' : '';"
13th Jul 2021, 4:45 AM
visph
visph - avatar
0
Han go in previous answer edited input event attribute content, to be shorter and better (don't hide partial blinking border) ^^
13th Jul 2021, 5:11 AM
visph
visph - avatar
0
Thanks everyone
13th Jul 2021, 11:18 AM
Han go