{"id":2573,"date":"2017-10-04T20:16:56","date_gmt":"2017-10-04T20:16:56","guid":{"rendered":"http:\/\/cssreset.com\/?p=2573"},"modified":"2017-10-04T20:16:56","modified_gmt":"2017-10-04T20:16:56","slug":"stylish-focus-effect-on-input-text-using-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/stylish-focus-effect-on-input-text-using-css\/","title":{"rendered":"Stylish Focus Effect on Input Text Using CSS"},"content":{"rendered":"

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.<\/p>\n

HTML Markup<\/h2>\n

Let\u2019s start off by creating the HTML markup. Define an input type text and a span element inside a div element. It\u2019s important to wrap the input and span element inside a div element to ensure that the animated border doesn\u2019t overflow and doesn\u2019t disturb the UI.<\/p>\n

<div class=\"container\">\r\n <input class=\"input\" id=\"txtFirstName\" type=\"text\" placeholder=\"First Name\">\r\n <span class=\"border\"><\/span>\r\n<\/div><\/pre>\n
CSS<\/h2>\n
As you can see in the HTML markup, there are 3 CSS classes are used which are container<\/strong>, input,<\/strong> and border<\/strong>. Before we take a look at these CSS classes, first structure the basic page design. Set the background color to white:<\/p>\n
body {\r\n background-color: #fff;\r\n}<\/pre>\n
Next, when the focus is on the input text element, set the outline to “none” as we don\u2019t 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:<\/p>\n
:focus {\r\n outline: none;\r\n}<\/pre>\n
Next, set width of input text to 100%:<\/p>\n
input[type=\"text\"] {\r\n width: 100%;\r\n}<\/pre>\n
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:<\/p>\n
.container {\r\n width: 200px;\r\n position: relative;\r\n}<\/pre>\n
We need to remove the default border which appears for input type text except the bottom border. The CSS class \u201c.input\u201d exactly accomplishes the same and it is applied to the input text element:<\/p>\n
.input {\r\n border: 0;\r\n padding: 10px 0;\r\n border-bottom: 1px solid #ccc;\r\n}<\/pre>\n
There is a span element placed below the input type text and decorated with CSS class \u201cborder\u201d. This class sets the bottom border position and its color:<\/p>\n
.input ~ .border {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background-color: #27ad8a;\r\n}<\/pre>\n
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:<\/p>\n
.input:focus ~ .border {\r\n width: 100%;\r\n transition: 0.5s;\r\n}<\/pre>\n
Here is the complete CSS code:<\/p>\n
body { background-color: #fff; }\r\n:focus { outline: none; }<\/pre>\n
.container {\r\n width: 200px;\r\n position: relative;\r\n}\r\ninput[type=\"text\"] { width: 100%; }\r\n.input {\r\n border: 0;\r\n padding: 10px 0;\r\n border-bottom: 1px solid #ccc;\r\n}\r\n.input ~ .border {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background-color: #27ad8a;\r\n}\r\n.input:focus ~ .border {\r\n width: 100%;\r\n transition: 0.5s;\r\n}<\/pre>\n
You can check out a working demo here<\/a>.<\/p>\n
Conclusion<\/h2>\n
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.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2573"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2573"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2573\/revisions"}],"predecessor-version":[{"id":2575,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2573\/revisions\/2575"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}