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.

Open Compiler
<!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

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements