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.
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:
Please Login to comment...