How to make Google search bar like input box highlight on hover using CSS ? Last Updated : 10 May, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Syntax: element :hover{ // CSS declarations; } Example: In this example, we are using the above-explained approach. 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: Comment More infoAdvertise with us Next Article How to show/hide dropdown menu on mouse hover using CSS ? G gurukiranx Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to show/hide dropdown menu on mouse hover using CSS ? The approach of this article is to show and hide the dropdown menu on mouse hover using CSS. The task can be done by using the display property and :hover selector. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to Show Hide Dropdown Using CSS 2 min read How to Change the Cursor into a Hand Pointer on Hover over list using CSS CSS offers a powerful property called "cursor" that controls the appearance of the mouse pointer when hovering over specific HTML elements. By assigning different values to this property, you can customize the cursor's behaviour. In our case, we'll be using the value "pointer" to trigger the classic 2 min read How to set Input Fields with Black Border on Focus using CSS ? The visual cues play a crucial role in guiding user interaction in web design. One common interaction is when users focus on input fields, such as text boxes or text areas, during form filling. To enhance the user experience, it's essential to provide clear feedback when an input field is in focus. 2 min read How to Change Image Opacity on Hover using CSS ? Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive 2 min read How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU 2 min read How to add border to an element on mouse hover using CSS ? Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties.ApproachHTML Structure 1 min read Like