How to make Google search bar like input box highlight on hover using CSS ?
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:
