Input Focus / 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:

<input class="focus1" type="text" name="firstname">

Example

input[type=text]:focus
{

  background-color: lightblue;

}

<input class="focus2" type="text" name="firstname">

Example

input[type=text]:focus
{

  border: 3px solid #555;

}

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:

<input type="text" name="search" placeholder="Search.." class="icon">

Example

input[type=text]
{
  background-color: white;
  background-image: url('searchicon.png');

background-position: 10px 10px;
  background-repeat:
no-repeat;

padding-left: 40px;

}

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.

<input id="myInp" type="text" name="search" placeholder="Search..">

Example

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {

width: 100%;
}