Open In App

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

Last Updated : 10 May, 2023
Like Article

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.


element :hover{
    // CSS declarations;

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


<!DOCTYPE html>
        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;
    <div class="container">
        <input id="search-bar" type="text" />
        <button class="buttons">Search</button>


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads