Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to make Google search bar like input box highlight on hover using CSS?

CSS Web Development Front End Technology

Creating a Google-like search bar with hover effects enhances user experience by providing visual feedback. The key is to combine the :hover pseudo-class with the box-shadow property to create an elegant highlighting effect when users interact with the input field.

Syntax

input:hover {
    box-shadow: horizontal vertical blur spread color;
}

Key CSS Properties

The :hover Pseudo-class

The :hover pseudo-class applies styles when a user hovers over an element with their mouse ?

<!DOCTYPE html>
<html>
<head>
<style>
    button {
        padding: 10px 20px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    button:hover {
        background-color: #e0e0e0;
        color: #333;
    }
</style>
</head>
<body>
    <button>Hover over me!</button>
</body>
</html>

A button that changes background color from light gray to darker gray when hovered.

The box-shadow Property

The box-shadow property creates shadow effects around an element ?

<!DOCTYPE html>
<html>
<head>
<style>
    .shadow-box {
        width: 200px;
        height: 100px;
        background-color: white;
        border: 1px solid #ddd;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
</head>
<body>
    <div class="shadow-box">Box with shadow</div>
</body>
</html>

A white box with a subtle gray shadow beneath it, creating a floating effect.

Creating Google-like Search Bar

Here's how to create a search input that mimics Google's search bar with hover highlighting ?

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
    }
    
    .search-container {
        text-align: center;
    }
    
    .search-box {
        width: 400px;
        height: 44px;
        padding: 0 16px;
        border: 1px solid #dfe1e5;
        border-radius: 24px;
        outline: none;
        font-size: 16px;
        transition: box-shadow 0.3s ease;
    }
    
    .search-box:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .search-box:focus {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-color: transparent;
    }
    
    .search-btn {
        margin-top: 20px;
        padding: 10px 20px;
        border: none;
        background-color: #f8f9fa;
        color: #3c4043;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .search-btn:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
</style>
</head>
<body>
    <div class="search-container">
        <h1>TutorialsPoint Search</h1>
        <input type="text" class="search-box" placeholder="Search TutorialsPoint...">
        <br>
        <button class="search-btn">Search</button>
    </div>
</body>
</html>

A Google-like search interface with a rounded input field that shows a subtle shadow when hovered or focused, along with a search button below.

Enhanced Version with Icon

Here's an advanced version with a search icon inside the input field ?

<!DOCTYPE html>
<html>
<head>
<style>
    .search-wrapper {
        position: relative;
        width: 400px;
        margin: 50px auto;
    }
    
    .search-input {
        width: 100%;
        height: 44px;
        padding: 0 20px 0 50px;
        border: 1px solid #dfe1e5;
        border-radius: 24px;
        outline: none;
        font-size: 16px;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }
    
    .search-input:hover,
    .search-input:focus {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        border-color: rgba(223, 225, 229, 0);
    }
    
    .search-icon {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa0a6;
        font-size: 16px;
    }
</style>
</head>
<body>
    <div class="search-wrapper">
        <span class="search-icon">?</span>
        <input type="text" class="search-input" placeholder="Search anything...">
    </div>
</body>
</html>

A search input with a magnifying glass icon on the left side, featuring smooth shadow animation on hover and focus.

Conclusion

Creating a Google-like search bar involves combining :hover and :focus pseudo-classes with box-shadow for visual feedback. The transition property ensures smooth animations, enhancing the overall user experience.

Updated on: 2026-03-15T15:58:31+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements