How to Make Search Box with Icon Using HTML & CSS Only

By admin

October 18, 2020

0

100

Make Search Box with Icon Using HTML & CSS

How to Make Search Box with Icon Using HTML & CSS Only To create this program First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program..

Video Tutorial Make Search Box with Icon

I hope you’ve understood the basic concept of this search box after watching this video tutorial. I think this video can help beginners to know CSS in depth. You can use this program or design on your website or project after a few changes according you want. Also, you can redesign this program to take this sidebar menu to the next level…

HTML SOURCE:

<!DOCTYPE html> <!– Created By Theinfowave –> <head> <title> Search box </title> <link rel=”stylesheet” href=”style.css”> </head> </p><br /><br /> <h1>SEARCH BOX</h1><br /><br /> <div> <i aria-hidden=”true”></i> </div><br /><br /> <div> <a href=”https://infobing.com/#”>Search</a> </div><br /><br /> <p>

You May Also Like:

Social Media Buttons with Tooltip on Hover using HTML & CSS

Side Navigation Menu | Animated Sidebar Menu using HTML & CSS

How to Make a Website Using HTML and CSS l Landing Page l

CSS SOURCE:

*{ padding:0; margin: 0; font-family: sans-serif; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background: url(pic.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } h1{ position: absolute; top: 35%; color: white; } .box{ width: 500px; height: 50px; background-color: white; border-radius: 30px; display: flex; align-items: center; padding: 20px; } .box > i { font-size: 20px; color: #777; } .box > input{ flex: 1; height: 40px; border: none; outline: none; font-size: 18px; padding-left: 10px; } .button{ position: absolute; top: 63%; left: 50%; font-size: 18px; transform: translate(-50% , -50%); } .btn{ border: 2px solid #fff; border-radius: 24px; padding: 10px 30px; color: #fff; text-decoration: none; transparent:0.6ease; } .btn:hover{ background-color: #FFFF00; color: #000; }

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated…

Previous articleiPhone 12 Box Mockup Using Html and CSS Only

Next articleHow to Make Dropdown Menu Bar Search box and Button Using HTML and CSS

How to Make Search Box with Icon Using HTML & CSS Only

Video Tutorial Make Search Box with Icon

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated…

Related Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

LEAVE A REPLY Cancel reply

Latest Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

Navjot Singh Sidhu gets 1-year jail

Zara Phythian: ‘Dr Strange’ actress jailed for sexual abuse of teen girl

How to Make Search Box with Icon Using HTML & CSS Only

Video Tutorial Make Search Box with Icon

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated…

Related Articles

LEAVE A REPLY Cancel reply

Stay Connected

Latest Articles