Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 08 Oct, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Example:

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:




My Personal Notes arrow_drop_up

Start Your Coding Journey Now!