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.
<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.
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!
<!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>
<!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.
<!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>
<!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>