Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Search Bar using HTML and CSS
To create a search bar using HTML and CSS, we can use simple form elements and basic CSS properties. Search box is most commonly used component in a website which makes navigation easier. In this article, we will be understanding how we can create a search bar with search button using HTML and CSS.
We are having a text type input box and a button in this article, our task is to create a search bar using HTML and CSS.
Steps to Create a Search Bar Using HTML and CSS
- First we have created a form and then created a search input text box using HTML input tag and type attribute and then created a button using button tag.
- We have used search class which sets the background-color and max-width of search bar.
- Then, we have designed the search input box where we have applied padding and border and set the width of the box and border-radius.
- With button class we have designed the button by setting the background color and text color of button.
- We have used :hover psuedo class which changes cursor to pointer, background and text color upon hovering.
- We have used link tag to insert an icon on search button.
Example
Here is a complete example code implementing above mentioned steps to create a search bar using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
<style>
.search {
padding: 5px;
background-color: #031926;
max-width: fit-content;
border-radius: 5px;
}
input[type="text"]{
padding: 10px;
border: 2px solid #031926;
border-radius: 5px;
width: 200px;
}
button {
padding: 10px;
border-radius: 5px;
background-color: #031926;
color: white;
}
button:hover {
color: #031926;
background-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>
To create a Search Bar using HTML and CSS
</h3>
<p>
We have used <strong>input</strong> tag
to create a text type search box using HTML
and CSS.
</p>
<div class="search">
<form action="#">
<input type="text" placeholder="Search...">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</body>
</html>
Conclusion
In this article, we learnt how to create a search bar using HTML and CSS. It is a very simple task and can be easily implemented using basic CSS properties.
Updated on: 2024-09-17T14:34:05+05:30
2K+ Views
Advertisements