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?
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Creating Your Own Bragdoc With Eleventy
Mar 18, 2025 am 11:23 AM
No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.
What the Heck Are npm Commands?
Mar 15, 2025 am 11:36 AM
npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
