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: