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

This is an example of CSS focused animation. With the CSS 3 evolved with the new behaviors of transition and animations. Now you can design the animations without using Javascript or Flash. Transitions in CSS3 gives an ability to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted. HTML in this snippet is simple with the field class used for input. The CSS styles are defined for all the elements of the HTML. Check out the effect once you click on the input field. The input field is marked with a transform to display the animation while it is selected and deselected. You can use this as an example for other fields in case you use the CSS 3 version. Make sure the color and effect match your webpage. Source: https://codepen.io/daniandl/pen/boqyYE