Loading lesson path
By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.
:focus selector to do something with the input field when it gets focus:
Example input[type=text]:focus
{
background-color: lightblue;
}Example input[type=text]:focus
{
border: 3px solid #555;
}If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:
Example input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;Formula
background - repeat:no-repeat;
padding-left: 40px;
}transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.
Example input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}