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

Last Updated : 10 May, 2023

In this article, we will learn how to make the input box highlight on hover like the Google search bar.

Approach: We will use the CSS hover property so that whenever we hover over an element we can have some animations. For the input box, there is a box-shadow property that we can use to specify our dimensions of shadow.

Syntax:

element :hover{
    // CSS declarations;
}

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h2 {
          
            /* Styling for the geeksforgeeks
            text on the page which is green
            in color, centered and has the
            font family of Arial */
            color: #2f8d46;
            text-align: center;
            font-family: "Arial";
        }

        #search-bar {

            /* Set the display as block which will 
            take whole width of the page */
            display: block;

            /* Set the margin-left and margin-right
            to 'auto' so that search bar will be at
           the center */
            margin-left: auto;
            margin-right: auto;

            /* Set the search bar to have the width
            to '550px' and height to '40px' similar 
            to Google Search Bar */
            width: 550px;

            /* Set the border-radius to '50px' which 
            makes the corners of search bar as round */
            border-radius: 50px;
            height: 40px;

            /* Set the border to a solid color */
            border: 1px solid #dddddd;

            /* Disable the outline */
            outline: none;

            /* Set the padding-left to '40px' that 
            will make the cursor to start the 40px 
            from the left  */
            padding-left: 40px;
        }

        input:hover {
          
            /* Styling for search bar when we hover on
              it to show the shadow of the search bar
            The attributes for box-shadow are:
            offset-x | offset-y | blur-radius | color */
            box-shadow: 0px 1px 3px rgb(192, 185, 185);

            /* You can play with these values to
            get your desired shadow effect */
        }

        .buttons {
          
            /* Styling the buttons of the page*/
            padding: 10px 20px 10px 20px;
            border-radius: 4px;
            border: none;
            margin-top: 20px;
            cursor: pointer;
        }

        .container {
          
            /* Center the button on the page */
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>GeeksforGeeks</h2>
        <input id="search-bar" type="text" />
        <button class="buttons">Search</button>
    </div>
</body>
</html>

Output:

How to Change the Cursor into a Hand Pointer on Hover over list using CSS

gurukiranx

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?