How to highlight the input box of Google search bar on hover using CSS
How to Highlight the Google Search Input Box on Hover Using CSS
The search bar is an often overlooked part of a website design, despite consumers relying on it to access unique information. Because it’s one of the most frequently used sections of a website, its design has a significant impact on the user experience.
Search bars are beneficial on websites with more than 100 pages of complex content. On large e-commerce, news, deals, and booking sites in the business-to-consumer (B2C) space, search bars are used to help customers locate information. They’re also used on large B2B websites with multiple customer segments and product lines. A search bar might not be necessary for a small website with just a few pages, but as your site grows, it will become essential.
A search bar is essentially made up of two UI elements: an input field and a button. In this article, we’ll see how to use CSS properties to create a highlighted input field similar to the Google search bar.
Google Search Bar
The search bar is a feature in any internet browser that allows users to search the internet for information. It also allows readers to search websites while browsing. Similarly, users can perform any type of search from their home screen using the Google Search bar, a search widget connected to the Google app.
Input Box
The <input> tag is an HTML element used to create interactive web-based forms where users can submit their data. There are several input data types, depending on the device and user. The <input> element is one of the most popular and commonly used elements in HTML due to its various input data types and attributes.
Following is the syntax of this element
<input type= "value" id= "demo" name= "demo">
Note – Use the <label> tag to define the <input> element. The <label> element’s for attribute should be the same as the <input> element’s id.
CSS Hover Properties
:hover is a CSS pseudo-class that lets users know that a pointing device has clicked or moved a specific element. For example, if you hover your mouse over an element on a page, its font color or background color might change based on the specified CSS properties.
Example
See the example below –
<!DOCTYPE html>
<html>
<head>
<title> CSS buttons </title>
<style>
button{
margin: 10px 5px 10px 10px;
padding: 5px;
color: blue;
}
button:hover{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1> Hovering on a Button </h1>
<button> Click Me! </button>
</body>
</html>
Once you hover over the button element, the text color changes from blue to red. Additionally, the text’s font size increases.
Box-Shadow Property
The box-shadow property allows developers to apply one or more shadows to an element. Multiple effects can be assigned by separating them with commas.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border: 5px solid;
padding: 10px 15px;
box-shadow: -5px -10px 0px 5px grey;
}
</style>
</head>
<body>
<h1> The box-shadow property</h1>
</article>
</body>
</html>
Creating an input highlight
To create an input like the Google search bar, we need to follow these steps –
- Create an input with type=”text” .
-
Use CSS to adjust its height and width. Use the box-shadow property to give the input field a shadow effect.
-
To make it similar to the Google search bar, the shadow effect should appear on hover, so we’ll use the CSS hover property.
Example
<!DOCTYPE html>
<html>
<head>
<title> Input search box </title>
<style>
body{
background-color: cyan;
}
h1{
color: #00F00;
text-decoration: underline;
}
#search-box{
width: 350px;
height: 20px;
border-radius: 21px;
text-align: center;
border: 1px solid #EDEADE;
outline: none;
display: block;
}
#search-box:hover{
box-shadow: 4px 4px 4px gray;
cursor: pointer;
}
input:hover {
box-shadow: 0px 1px 3px rgb(192, 185, 185);
}
button{
padding: 2px 7px;
border-radius: 3px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<div class="box">
<h1> Tutorialspoint </h1>
<input type= "text" id= "search-box"> <br> <br>
<button> Search </button> </center>
</body>
</html>
Conclusion
In this article, we discussed how to create an input field similar to the Google search bar that is highlighted on hover.