Creating a Stylish Search Bar for Your Website: HTML & CSS Tutorial

[@Sayvai]

💡I think we need to leverage the power of modern and widely supported CSS flex "gap" and "grow" property rather than still relying on margins as spacers between flex child elements.

[@josiahclarke8328]

Tysm i learned alot more than ever Plz keep making these easily digestible vids for us They're helpful as hell🤟

[@kobayashimauro]

It inspired me a lot, thank you!

[@beinyourguard]

very simple and nice. love it

[@kyd1762]

It really helped me for my project work, thank you so much

[@sammarkey9514]

i did exactly what you did to the "T" and the box didnt pop up where i should be able to type and its in the footer where i want it and there is a background color to the footer and still dont know how to fix it

[@havocmemes]

The video was really good and easy to understand. Can u pls make another video on the search bar with recomended/mostly searched buttons right below the search bar? Or just lemme know if u have already made a video on this topic xddd

[@Kieranmcm07]

Hello. Can i ask how do you change the color of the x when typing into the search box. The color is blue and i dont know how to change it.

[@atm_sakib]

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

[@re-agentnathaniel]

I am trying to add this within an existing website on GHL, it’s distorting my website page and not becoming a search bar. What am I doing wrong?

[@_____vieve]

this helped me, thanks!

[@Pennonly]

can i switch the icon form left to the right if possible which part should I change?

[@Jaspertje]

Use float: right;

[@Pennonly]

can i switch the icon from left to right If possible, which part should I change?

[@hi-kj3eu]

just put the code of the icon after the input, that should work

[@anonkjvn]

i have an 'X' symbol to the right of the search bar, how do i change its appearance? ive used --webkit-search-cancel-button and can remove it but cant change its appearance help pls

[@PRIESTOFLOVEWORLD]

Thank you this information is helpful

[@Growguru_yt]

thanks alot man!!

[@moonlitsonataa]

thanks for this!!

[@dcode-software]

No problem

[@shaharunakter8612]

Now how can I align it to center? 🙏

[@hs_infotech]

Put that form into div tag Paste here your Form element & search bar CSS .wrapper { display: flex; justify-content: center; align-items: center; } That's it

[@serbanpascovici913]

Thanks a lot!

[@RevathiR-lh1rq]

thank you it helped me

[@dcode-software]

Glad to hear that!

[@HighlandCatz]

thank you this helped

[@r4ndom-here]

But how do you get the input of the user? PS your vids are very cool!

[@hi-kj3eu]

how do i make it so it uses google as a search engine

[@Big_Fish911]

Just make it so it takes you to the Google search link or embed it

[@hi-kj3eu]

@@Big_Fish911 ty

[@md323_]

Is it working???

[@VivekYadav-up7uu]

nice

[@truthteachers]

Bro, why the same old thing over and over. Can we see something innovative or something that is full with a functioning search component? Search in KZbin and we get hundreds of the same thing. This is like teaching all dogs old tricks. I am so sorry to be open and frank. If we see more old stuff, my friends and me my friends may soon have to unsubscribe as we see really no value. I hope you understand. Thank you, bro.

[@dcode-software]

Yeah I understand, though it can be difficult to make existing subscribers happy as well create helpful content for those searching on KZbin. Appreciate you sticking around 🙂 I have some new content coming up soon (maybe React)

[@truthteachers]

@@dcode-software Tq bro for replying. I think even React is over done. So many people giving beginners course. What would be interesting is creating full functional components let it react or anything else.