Home >Web Front-end >CSS Tutorial >How to make a Google search bar (like an input box) highlight on hover using CSS?
How to make a Google search bar (like an input box) highlight on hover using CSS?
- WBOYforward
- 2023-09-14 23:17:02973browse
The search bar is an often overlooked component of the website design process, even though consumers rely on it to access unique information. Since the search bar is one of the most commonly used parts of a website, the design of the search bar has a considerable impact on the user experience.
The search bar is useful for sites with more than 100 pages of complex content. Search bars are used to help customers find information on large e-commerce sites, news sites, deals sites, and booking sites in the business-to-consumer (B2C) space. They are also employed by large B2B sites with multiple customer segments and product lines. For a small website with few pages, the search bar may not be necessary, but as the website grows, the search bar will be essential.
The search bar basically consists of two UI elements: an input field and a button. In this article, we will see how to create an input box highlight similar to the Google search bar using CSS properties.
Google Search Bar
The search bar is a location in any internet browser that enables users to search for required information over the internet. It also enables readers to search the website while browsing it. Likewise, users can perform any type of search from the home screen using the Google search bar (a search widget linked with the Google app).
Input box
Thetag is an HTML element used to create interactive web-based forms for users to submit data. There are various input data types depending on the type of device and user. The element is one of the most popular and commonly used elements in HTML due to its various input data types and attributes.
The following is its syntax -
<input type= "value" id= "demo" name= "demo">
Note - Use the
CSS Hover Properties
:hover is a CSS pseudo-class that enables the user to know that a pointing device has been clicked or moved over that specific element. For example, if you hover over an element on the page, its font color or background color may change based on specified CSS properties.
Example
View the examples 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>
After hovering the mouse over the "Button" element, the color of the text inside it will change from blue to red. Additionally, the font size of the text will increase.
Box shadow properties
The box-shadow property enables developers to apply one or more shadows to an element. Assign multiple effects simply separated 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>
Create input box highlighting
In order to create an input box like Google search bar, we need to follow the following steps -
Create an input field with type="text".
Adjust its height and width using CSS. Use the box-shadow property to provide a shadow effect to the input field.
To make it similar to the Google search bar, a shadow effect should appear on hover, so we will use CSS hover properties.
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>
in conclusion
In this article, we discussed how to create an input box similar to the Google search bar that highlights on hover.
The above is the detailed content of How to make a Google search bar (like an input box) highlight on hover using CSS?. For more information, please follow other related articles on the PHP Chinese website!