Web Front-endCSS TutorialHow 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 id="Hovering-on-a-Button"> 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 id="The-box-shadow-property"> 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 id="Tutorialspoint"> 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!
Should a website work without JavaScript?Apr 17, 2025 am 09:27 AMThe JS Party podcast just had a fun episode where they debated this classic question by splitting into two groups of two. Each group was assigned a "side" of
Accessibility and web performance are not features, they're the baselineApr 17, 2025 am 09:21 AMThis week I’ve been brooding about web performance and accessibility. It all began when Ethan Marcotte made a lot of great notes about the accessibility
Fast Static Sites with Netlify and AnyModApr 17, 2025 am 09:16 AMIn about 10 minutes, we'll set up a workflow that makes static sites dead simple.
'Off The Main Thread'Apr 17, 2025 am 09:14 AMJavaScript is what they call "single-threaded." As Brian Barbour puts it:
Maskable Icons: Android Adaptive Icons for Your PWAApr 17, 2025 am 09:13 AMThere is a new web feature called maskable icons that is coming soon to Firefox Preview and other web browsers. This new icon format will let your PWAs have their own adaptive icons on Android.
Where should 'Subscribe to Podcast' link to?Apr 16, 2025 pm 12:04 PMFor a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:
Browser Engine DiversityApr 16, 2025 pm 12:02 PMWe lost Opera when they went Chrome in 2013. Same deal with Edge when it also went Chrome earlier this year. Mike Taylor called these changes a "Decreasingly
UX Considerations for Web SharingApr 16, 2025 am 11:59 AMFrom trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these
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
Zend Studio 13.0.1
Powerful PHP integrated development environment
Notepad++7.3.1
Easy-to-use and free code editor
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
WebStorm Mac version
Useful JavaScript development tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
