How to Create Search Boxes
Search boxes are ubiquitous in every website. It is handy for finding specific data. It may have autocompleted functions for assisting users in searching.
In this snippet, we will talk about creating search boxes with CSS and HTML step by step.
Create HTML
- Create a <form> tag which is used to add HTML forms to the web page for user input.
- Add an <input> tag within the <form> element.
- Also, include the placeholder saying "Search here!" and a class of "search".
- Add another <input> with a class "submit" and value "search".
<form action="/form/submit" method="GET">
<input type="text" name="text" class="search" placeholder="Search here!">
<input type="submit" name="submit" class="submit" value="Search">
</form>Now, we have our search box, but we should apply a style to it.
Add CSS
- Set the background-color of the <body>.
- Start styling the <form> element, "search" and "submit" classes.
- Use the width, margin, padding, and font-size properties.
body {
background-color: #8ebf42;
}
form {
width: 400px;
margin: auto;
margin-top: 250px;
}
input {
padding: 4px 10px;
border: 0;
font-size: 16px;
}
.search {
width: 75%;
}
.submit {
width: 70px;
background-color: #1c87c9;
color: #ffffff;
}After adding all the properties, run the code and see how you’ve created the search box!
Example of creating a search box with HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #8ebf42;
}
form {
width: 400px;
margin: auto;
margin-top: 250px;
}
input {
padding: 4px 10px;
border: 0;
font-size: 16px;
}
.search {
width: 75%;
}
.submit {
width: 70px;
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Create search boxes</h2>
<form action="/form/submit" method="GET">
<input type="text" name="text" class="search" placeholder="Search here!">
<input type="submit" name="submit" class="submit" value="Search">
</form>
</body>
</html>Result
Example of creating a search box using a search icon from Font Awesome:
<!DOCTYPE html>
<html>
<head>
<title>Awesome Search Box</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
background: #00a08d;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #666666;
height: 40px;
border-radius: 40px;
padding: 10px;
display: flex;
justify-content: space-between;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
color: black;
}
.search-btn {
color: #eeeeee;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
color: white;
cursor: pointer;
text-decoration: none;
}
.search-btn > i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
font-weight: bold;
}
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" name="name" class="search-txt" placeholder="Type to search" />
<a class="search-btn" href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</div>
</body>
</html>In the given example, we used a Search icon from Font Awesome.
Let's see another example of search boxes created with pure HTML and CSS.
Example of creating a search box:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background: #cccccc;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #9e0098;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.searchTerm:focus {
color: #380136;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #9e0098;
background: #9e0098;
text-align: center;
color: #eeeeee;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Create search boxes</h2>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Type">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</body>
</html>Example of creating a search box using a hovering effect:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 50%;
}
body {
box-sizing: border-box;
}
.container {
width: 25rem;
height: 100%;
margin: 0 1rem;
position: relative;
}
h2 {
margin: 2rem;
font-size: 20px;
}
.searchbar {
font-size: 2.4rem;
width: 25rem;
height: 5rem;
border: none;
outline: none;
border-radius: 10rem;
padding: 2rem;
transition: all .1s;
transition-delay: .1s;
}
.searchbar:hover {
width: 27rem;
height: 6rem;
}
.button {
height: 2rem;
position: absolute;
top: 1.5rem;
right: 1rem;
transition: all .1s;
transition-delay: .1s;
}
.button:hover {
cursor: pointer;
}
.searchbar:hover + .button {
height: 2.5rem;
top: 1.8rem;
right: 0;
}
.searchbar::placeholder {
opacity: .3;
}
</style>
</head>
<body>
<h2>Create search box</h2>
<div class="container">
<input type="text" maxlength="12" placeholder="Search" class="searchbar">
<img src="https://images-na.ssl-images-amazon.com/images/I/41gYkruZM2L.png" alt="search icon" class="button">
</div>
</body>
</html>