The HTML Search Box enables users to search through content by utilizing the "Search" attribute, which belongs to a specific type of element within HTML.
Syntax
Example
<input type="search">
Illustrations: Below are instances that demonstrate various CSS codes utilized to showcase different search boxes on a webpage.
Example 1:
Example
<!DOCTYPE html>
<html>
<head>
<title>
Example of search box
</title>
<style>
/* The following tag selector body use the text-align and background-color properties. The text-align property is used to align the text as center, and the background-color is used to specify the blue colour as a background of a page*/
body {
text-align: center;
background-color: blue;
}
/* The following tag selector form uses the different properties for displaying a form. */
form{
display: block;
left: 30%;
position: absolute;
top: 30%;
}
/* The following tag selector input uses the different properties for the search box. */
input[type=search]{
border: 5px orange;
box-sizing: border-box;
font-size:1em;
height: 2em;
margin-left: 10vw;
padding: .5em;
transition: all 2s ease-in;
width: 30vw;
z-index:1;
&:focus {
border: solid 3px #09f;
outline: solid #fc0 2000px;
}
}
</style>
</head>
<body>
<form>
<input type="search" placeholder="Search for any site"/>
</form>
</body>
</html>
Output:
In this instance, we are demonstrating the utilization of a text input field styled with CSS to function as a search field, without employing the search value of the type attribute in an input element.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Second Example of search box
</title>
<style>
*
{
outline: none;
}
/* The following tag selector form uses one property for specifying the height of a form. */
form
{
height: 96px;
}
/* The following tag selector input use the different properties for specifying the text field. */
input[type="text"]
{
width: 100%;
height: 80px;
font-size: 40px;
line-height: 1;
}
/* The following tag selector uses the color of placeholder as orange for the input text field. */
input[type="text"]::placeholder
{
color: orange;
}
.tb
{
display: table;
width: 100%;
}
.td
{
display: table-cell;
vertical-align: middle;
}
/* The following tag selector uses the different properties for specifying all the inputs and buttons used in the body tag in this html file. */
input, button
{
color: #fff;
font-family: Arial;
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}
/* the following id selector cover uses the different attribute which are used between the body tag */
#cover
{
position: absolute;
top: 50%;
width: 550px;
padding: 35px;
margin: -83px auto 0 auto;
background-color: #ff7575;
border-radius: 20px;
left: 0;
right: 0;
box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb;
transform: scale(0.6);
}
/* The following tag selector button uses the different proprties for specifying the button on a web page. */
button
{
position: relative;
display: block;
width: 84px;
height: 96px;
cursor: pointer;
}
/* The following id selector uses the different properties for searching button */
#s-circle
{
position: relative;
top: -8px;
left: 0;
width: 43px;
height: 43px;
margin-top: 0;
border-width: 15px;
border: 15px solid #fff;
background-color: transparent;
border-radius: 50%;
transition: 0.5s ease all;
}
button span
{
position: absolute;
top: 68px;
left: 43px;
display: block;
width: 45px;
height: 15px;
background-color: transparent;
border-radius: 10px;
transform: rotateZ(52deg);
transition: 0.5s ease all;
}
button span:before, button span:after
{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 45px;
height: 15px;
background-color: #fff;
border-radius: 10px;
transform: rotateZ(0);
transition: 0.5s ease all;
}
#s-cover:hover #s-circle
{
top: -1px;
width: 67px;
height: 15px;
border-width: 0;
background-color: #fff;
border-radius: 20px;
}
/* The following hover effect use the different properties when you take mouse to that element where thr s-cover is selector is used. */
#s-cover:hover span
{
top: 50%;
left: 56px;
width: 25px;
margin-top: -9px;
transform: rotateZ(0);
}
#s-cover:hover button span:before
{
bottom: 11px;
transform: rotateZ(52deg);
}
#s-cover:hover button span:after
{
bottom: -11px;
transform: rotateZ(-52deg);
}
#s-cover:hover button span:before, #s-cover:hover button span:after
{
right: 6px;
width: 40px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="cover">
<form method="get" action="">
<div class="tb">
<div class="td">
<!-- The following tag is input for the text input field which is used as a seach field on a web page -->
<input type="text" placeholder="Search" required></div>
<div class="td" id="s-cover">
<button type="submit">
<div id="s-circle"> </div>
<span> </span>
</button>
</div>
</div>
</form>
</div>
</body>
</html>
Output:
Browser Support
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| search box | Yes | Yes | Yes | Yes | Yes |