 |
| Search bar using html and css |
In this article, we given a Search bar using html and css as a project. Search Bar is mostly used in all apps to seach anything. It is a commonly used element. In this project, we created a search bar by adding input and button in html and added a css to style the seach bar with hover effect.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Search bar using html and css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Search-Bar.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Search bar using html and css source code
Here we given a html and css source code of Search bar project as given -
HTML
In html code, we added a input and button for search bar. Linked a css to add the styling to the search bar. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</div>
</body>
</html>CSS
In css code, we added a styling to search bar as color, background-color and position. Also, added a hover effect and responsiveness for better look. Copy the given css code and paste it into style.css file.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.search-container {
display: flex;
max-width: 600px;
width: 100%;
background-color: #000;
border-radius: 25px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
input[type="text"] {
flex: 1;
padding: 12px 20px;
border: none;
outline: none;
font-size: 16px;
background-color: #333;
color: #fff;
border-radius: 25px 0 0 25px;
transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
input[type="text"]:focus {
box-shadow: 0 0 8px rgba(81, 203, 238, 0.6), 0 0 15px rgba(81, 203, 238, 0.4);
}
button {
padding: 12px 20px;
border: none;
background-color: #2c1eee;
color: #fff;
font-size: 16px;
cursor: pointer;
border-radius: 0 25px 25px 0;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
button:hover {
background-color: #4d6ae9;
box-shadow: 0 0 15px rgba(81, 203, 238, 0.6);
}
input:hover {
box-shadow: 0 0 15px rgba(81, 203, 238, 0.6);
}
@media (max-width: 768px) {
.search-container {
max-width: 300px;
}
}
@media (max-width: 480px) {
.search-container {
flex-direction: column;
align-items: stretch;
}
input[type="text"],
button {
border-radius: 25px;
}
button {
border-radius: 25px;
margin-top: 15px;
}
}Output
Check the output of Search bar project -
Also see this -
Hope this helps you to know about Search bar using html and css with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects