how to create search bar in html

how to create a search bar in HTML

Learn How To Make A Search Bar Using HTML And CSS In 10 Just Minutes Step-by-step tutorials for beginners

In this article, we will create a search bar where you can see the Blur Effect in the search field. When we write anything in the search bar and click on the search icon. It will open the google search result. We will make this search bar using HTML And CSS only in just 10 minutes.

Follow Steps To Create Search Bar In HTML And CSS :

1. Open Notepad in your PC

2. Create .html file or save Filename.html file in your PC

3. Copy Default HTML Layout code from below

<html>
<head>
</head>

<body>
</body>
</html>

4. Now Copy CSS Code From Below And Paste it on between <head> start </head> Close.

This CSS code creates a responsive login form with a centered design, a title, and two input fields for the username and password. The login button is styled with a green background and white text. The form has a border-radius, box-shadow, and transitions for a more modern look. Feel free to modify the CSS code to suit your needs.

CSS Code to create search bar in html

<style>
html, body {
height: 100%;
}

body {
margin: 0;
background: #000000;
display: grid;
place-items: center;
}

.wrapper {
text-align: center;
width: 230px;
}

.search {
display: inline-flex;
padding: 5px;
border-radius: 50px;
transition: 0.4s;
}

.search:hover {
background: rgba(255, 255, 255, 0.15);
}

.search:hover input {
max-width: 180px;
}

.search input {
background: transparent;
border: 0;
max-width: 0;
padding: 0;
text-indent: 12px;
color: #f9f9f9;
font-size: 22px;
font-family: "Poppins";
outline: none;
transition: 0.4s;
}

.search input::placeholder {
color: rgba(255, 255, 255, 0.375);
}

.search span {
display: grid;
place-items: center;
width: 50px;
height: 50px;
background: #8f44fd;
color: #f9f9f9;
border-radius: inherit;
font-size: 24px;
pointer-events: none;
}
</style>

5. Now Copy code from below And paste between <body>Start </body> close.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Source+Code+Pro&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
/>

<div class="wrapper">
<div class="search">
<span class="uil uil-search">
</span>
<input placeholder="Search" type="text" />
</div>
</div>

Here You Can watch out Tutorial for how to create search bar in html

how to create search bar in html

how to create a search bar in HTML

Follow Steps To Create Search Bar In HTML And CSS :

1. Open Notepad in your PC

2. Create .html file or save Filename.html file in your PC

3. Copy Default HTML Layout code from below

4. Now Copy CSS Code From Below And Paste it on between <head> start </head> Close.

CSS Code to create search bar in html

5. Now Copy code from below And paste between <body>Start </body> close.

Download Source Code For how to create search bar in html

Post a Comment

Contact form