Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:



Last Updated : 10 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads