Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make Google search bar like input box highlight on hover using CSS?
The search bar is an often ignored component of a website during the design process, despite the fact that consumers rely on it to access unique information. Since the search bar is one of the most often used parts on a website, the design of the search bar has a considerable impact on user experience.
Search bars are beneficial on sites with more than 100 pages of complex content. Search bars are used to help customers locate information on large e-commerce sites, news sites, offers sites, and booking sites in the Business to Consumer (B2C) sector. They are also employed in huge B2B sites with several customer segments and product lines. A search bar may not be necessary for a tiny site with few pages, but it will be essential as the site grows.
A search bar is basically made up of two UI elements: an input field, and a button. In this article, we will see how we can use CSS properties to create an input box highlight similar the Google search bar.
Google Search Bar
A search bar is a location within any internet browsers which enables its users to search the information needed to be known through the Internet. It also enables the readers to search a site while browsing the websites. Similarly, users can conduct any kind of search from their home screen using the Google Search bar, a search widget linked with the Google app.
Input box
The <input> tag is a HTML element which is used to create web-based interactive forms for the users to submit their data. On the basis of type of device and users, there are several kinds of input data type. The <input> element is amongst the most popular and commonly used element in HTML due to its various input data types and properties.
Following is the syntax of this –
<input type= "value" id= "demo" name= "demo">
Note − Use <label> tag to define elements for the <input> element. The for attribute of <label> element should be same as the id of <input> element.
CSS Hover Property
The :hover is a pseudo class of CSS which enables the users to know that a pointing device has clicked or moved upon that particular element. For example, if you hover your mouse on an element on the page, its font color or background color might change according to the assigned CSS properties.
Example
Check out the following example −
<!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 on the Button element, the colour of the text in it changes from blue to red. Also, the font size of the text increases.
The box-shadow property
The box-shadow property enables the developers to apply one or more shadow to an element. Multiple effects can be assigned simply by separating them by 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 id="demo"></article>
</body>
</html>
Creating input box highlight
In order to create an input box like the Google search bar, we need to follow the following steps −
Create an input field of type= “text”.
Adjust its height and width using CSS. Use the box-shadow property to provide shadow effect to the input field.
To make it similar to Google search bar, the shadow effect should be displayed on hovering so, we will use 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 grey;
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 have discussed on how to create an input box similar to google search bar which gets highlighted on hovering.
934 Views
