Awesome CSS Search Box Using Only HTML & CSS

like

This code is cute but not good enough. You only made it to work on "hover", whereas a user will very likely move his louse. On mobile (which is where this kind of minimalistic search bar would even be useful or likely), this doesn't work at all as "hover" events don't typically fire without some trickery with dragging your fingers.
In addition, it can be incredibly annoying in a real website where there will be other elements alongside the navigation bar the search will exist in that keep getting shifter around as the user accidentally moves the mouse over the search bar.

Poorly thought out UX.

A correct implementation would use focus/active instead of "hover", which would ensure the user wants to actually search and will stay that way as long as the user is focused on the search.

Moreover you Will NOT be able to AVOID JS (nor is there any point in trying), when trying to do a search bar (which will likely require an API call anyhow unless you build your site using only <form> like some primate), so you will need JS to detect three is text in the search bar in order to keep it open so the user can see his search.

Also, why use float if you use flex box? Do you understand what each of those do?

Keep working and improving, design wise it looks nice but your implementation is lacking.

Can you please tell me sir, if any texts are in the search bar, the bar shouldn't shrink. How can do like that..?

❤❤

Great content, I'm trying to make videos similar to yours, congratulations for the didactics!

thks for this vedio

thanks for tuition but bro how to make search on website conation can you help me

What will come after search

Hi

Does this work in php format?

Thank you

Is this responsive?

Can you share code

Which application u use for html and CSS

Is it responsive?

Okay thanks but what if the user is typing in the input and put the cursor outside the search box ?
Have you made a video with an other posibility ?

THXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX!!!

Website pr search button kaise lagaye without html css

How does it actually work then . Does it search something or it's jus the design?

I also have a search bar but that searches nothing

Thanks <3

👏

Nice

The fa fa search doesn't work on my vs code...what do you think?

Gracias compa , oajlá puedas subir mas elementos asi <3

big respect

Bang yg buat warna background cari nya dimana
Maaf masih pemula

thanks for this amazing tutorial

Thank you!

nic

nicc good

this is so good :) thank you

thank you <3

Please the full code

Please give me the source code 🤠

Me: who writes : instead of ; and then go mad of what the hell is wrong here

How can i only open and close it by clicking (static)(So it does not close instantly after moving the mouse ? )

After learning web development these are the kinda things that catch my eye..

Never use this type of music again🤦🏻‍♂️

and how do I make it work ????

Bro can i get the code??

How much time it takes to learn CSS

You're fabulous!!

Thank you .its good

Its awesome keep up the good work