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...