Stylish Focus Effect on Input Text Using CSS

This short post talks about creating a stylish focus effect on input text elements using a pure CSS solution. The animation shows a colored bottom border gradually appearing on the input text focus and completing the animation in half of a second.

HTML Markup

Let’s start off by creating the HTML markup. Define an input type text and a span element inside a div element. It’s important to wrap the input and span element inside a div element to ensure that the animated border doesn’t overflow and doesn’t disturb the UI.

<div class="container">
 <input class="input" id="txtFirstName" type="text" placeholder="First Name">
 <span class="border"></span>
</div>

CSS

As you can see in the HTML markup, there are 3 CSS classes are used which are container, input, and border. Before we take a look at these CSS classes, first structure the basic page design. Set the background color to white:

body {
 background-color: #fff;
}

Next, when the focus is on the input text element, set the outline to “none” as we don’t want to display the outline on the focus. An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”. Use the :focus selector to set outline to none:

:focus {
 outline: none;
}

Next, set width of input text to 100%:

input[type="text"] {
 width: 100%;
}

Next, define the container class. This class is applied to the div element which is the parent element for input type text and span elements. This CSS class sets the width and position CSS properties:

.container {
 width: 200px;
 position: relative;
}

We need to remove the default border which appears for input type text except the bottom border. The CSS class “.input” exactly accomplishes the same and it is applied to the input text element:

.input {
 border: 0;
 padding: 10px 0;
 border-bottom: 1px solid #ccc;
}

There is a span element placed below the input type text and decorated with CSS class “border”. This class sets the bottom border position and its color:

.input ~ .border {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 background-color: #27ad8a;
}

The most important part of this whole exercise is to display the animated border. The following CSS class will display the border on input focus event:

.input:focus ~ .border {
 width: 100%;
 transition: 0.5s;
}

Here is the complete CSS code:

body { background-color: #fff; }
:focus { outline: none; }

.container {
 width: 200px;
 position: relative;
}
input[type="text"] { width: 100%; }
.input {
 border: 0;
 padding: 10px 0;
 border-bottom: 1px solid #ccc;
}
.input ~ .border {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 background-color: #27ad8a;
}
.input:focus ~ .border {
 width: 100%;
 transition: 0.5s;
}

You can check out a working demo here.

Conclusion

To conclude, this short post talks about creating a stylish effect on focus on the input text element. The animation creates a bottom border, which gradually completes in specified duration. This code also gives you other ideas to implement different kinds of animations. You can change this code to change the style, color and appearance of the border.