This is an example of the stylish expandable input field using only pure CSS solution. The animation and effect expands the input field once clicked on it. The HTML markup is simple and easy by defining an input and span element inside a div element to ensure that the animated border doesn’t overflow and doesn’t disturb the UI. Next, we are using a freebee markup “growing-search” to increase the width of search while it is selected. The CSS is mainly focused on behavior while it is selected or submitted it hovered. The outline is specifically made none, for the input while it is in a selected state. The important part for this snippet is growing, which is done by increasing the width while the input is selected. You get an idea of using the different kinds of animations and effects. You can change this code to change the style, color, and appearance of the border. Source: https://codepen.io/Mestika/pen/CiKlj