CSS Form Focus and Icons
Style Input with Focus
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.
Use the :focus selector to do something with the input field when it gets focus:
Style Input with icon/image
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;
background-repeat:
no-repeat;
padding-left: 40px;
}
Try it Yourself »
Animated Search Input
In this example we use the CSS
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%;
}
Try it Yourself »
