{"id":3636,"date":"2019-10-14T17:06:21","date_gmt":"2019-10-14T17:06:21","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=3636"},"modified":"2019-11-27T16:44:32","modified_gmt":"2019-11-27T16:44:32","slug":"css-input-focus-placeholder-effects","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/","title":{"rendered":"CSS Input Focus &#038; Placeholder Effects | Custom Input Animations"},"content":{"rendered":"<p><strong>How we can create different types of input focus and placeholder effects using HTML CSS? Solution: See this CSS Input Focus &amp; Placeholder Effects, Custom Input Animations.<\/strong><\/p>\n<p>Previously I have shared some <span><a href=\"https:\/\/webdevtrick.com\/tag\/input\/\" target=\"_blank\" rel=\"noopener noreferrer\">input programs<\/a><\/span>, but this is about <strong>placeholder and focus animation<\/strong>. There are many kinds of <strong>border, background, placeholder<\/strong> animation, which you will see on input focus. In other words, you will see the <strong>animation effects<\/strong> when you will click on the inputs.<\/p>\n<p>Today you will learn to create <strong>Custom Input Animations<\/strong> with background and <span><a href=\"https:\/\/webdevtrick.com\/css-border-transition-effects\/\" target=\"_blank\" rel=\"noopener noreferrer\">border transitions<\/a><\/span>. There are many <strong>input fields<\/strong> with multiple animations like <strong>border, background, and label effects<\/strong>. All animations are you will see after focusing.<\/p>\n<p>So, Today I am sharing <strong>CSS Input Focus &amp; Placeholder Effects<\/strong>. For creating these effect I have used <span><a href=\"https:\/\/webdevtrick.com\/tag\/pure-css\" target=\"_blank\" rel=\"noopener noreferrer\">pure CSS<\/a><\/span>, but also there I have used little bit jQuery for <strong>label animations<\/strong>. This program will useful for creating <span><a href=\"https:\/\/webdevtrick.com\/tag\/form\/\" target=\"_blank\" rel=\"noopener noreferrer\">forms<\/a><\/span> and placing different input effects.<\/p>\n<p>If you are thinking now how these effects actually are, then see the <strong>preview<\/strong> given below.<\/p>\n<h3>Preview Of Custom Input Animations<\/h3>\n<p>See this video preview to getting the idea of how the animations look like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-3636-1\" width=\"640\" height=\"414\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-input-effects.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-input-effects.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/css-input-effects.mp4<\/a><\/video><\/div>\n<a class=\"maxbutton-2 maxbutton maxbutton-demo\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/webdevtrick.com\/demos\/css-input-effects\/\"><span class='mb-text'>Live Demo<\/span><\/a>\n<p>Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/css-fixed-social-media-sidebar\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fixed Social Media Sidebar<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/jquery-search-filter\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery Search Filter<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/javascript-dual-sliding-panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript Dual Sliding Panels<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/html-css-javascript-sticky-navbar\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sticky Navigation Bar<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>CSS Input Focus &amp; Placeholder Effects Source Code<\/h2>\n<p>Before <strong>sharing source code<\/strong>, let&#8217;s talk about it. First I have created many <strong>text input fields<\/strong> using HTML <span class=\"lang:default decode:true crayon-inline \">&lt;input type=&#8221;text&#8221;&gt;<\/span> tag. Inside the <span><a href=\"https:\/\/webdevtrick.com\/tag\/input\" target=\"_blank\" rel=\"noopener noreferrer\">inputs<\/a><\/span>, I have placed <strong>placeholder and labels<\/strong>, and put class and ID names. There I have created 3 sections, first is<strong> border effects<\/strong>, second is <strong>background effects<\/strong>, and third for <strong>label effects<\/strong>.<\/p>\n<p>Now <strong>using CSS<\/strong> I have placed all the elements in the right place, as you can see in the preview. For creating the animations I have mostly used CSS <span class=\"lang:default decode:true crayon-inline \">:before &amp; :after<\/span> properties and also used transition for controlling the animation (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::before\" target=\"_blank\" rel=\"noopener noreferrer\">info<\/a>).<\/p>\n<p>All the animation are based on <strong>pure CSS<\/strong>, but the label effect is little bit used jQuery. Basically, the main animation is created using CSS but <span><a href=\"https:\/\/webdevtrick.com\/tag\/jquery\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery<\/a><\/span> adds and removes the class name. Left all other things you will understand after <strong>getting the codes<\/strong>, I can&#8217;t explain all in writing.<\/p>\n<p>For creating this program you have to create 3 files for that. First for <strong>HTML<\/strong>, second for<strong> CSS<\/strong>, and the third for <strong>JavaScript<\/strong>. Follow the steps to creating this without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<em><strong>index.html<\/strong><\/em>&#8216; and put these codes given below.<\/p>\n<pre class=\"height-set:true height:750 lang:xhtml decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!--Code By Webdevtrick ( https:\/\/webdevtrick.com )--&gt;\r\n&lt;html lang=\"en\" &gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;Input Focus Placeholder | Webdevtrick.com&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"row\"&gt;\r\n    &lt;div class=\"container\"&gt;\r\n    \t&lt;h2&gt;Border effects&lt;\/h2&gt;\r\n    \t&lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-1\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-2\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-3\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        \r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-4\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-5\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-6\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        \r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-7\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;\r\n            \t&lt;i&gt;&lt;\/i&gt;\r\n            &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-8\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;\r\n            \t&lt;i&gt;&lt;\/i&gt;\r\n            &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-9\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-border\"&gt;\r\n            \t&lt;i&gt;&lt;\/i&gt;\r\n            &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        \r\n        &lt;h2&gt;Background Effects&lt;\/h2&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-10\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-11\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-12\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-13\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-14\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3\"&gt;\r\n        \t&lt;input class=\"effect-15\" type=\"text\" placeholder=\"Placeholder Text\"&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        \r\n        &lt;h2&gt;Input with Label Effects&lt;\/h2&gt;\r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-16\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-17\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-18\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-border\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        \r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-19\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-border\"&gt;\r\n            \t&lt;i&gt;&lt;\/i&gt;\r\n            &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-20\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-border\"&gt;\r\n            \t&lt;i&gt;&lt;\/i&gt;\r\n            &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-21\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-border\"&gt;\r\n            \t&lt;i&gt;&lt;\/i&gt;\r\n            &lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        \r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-22\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-23\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"col-3 input-effect\"&gt;\r\n        \t&lt;input class=\"effect-24\" type=\"text\" placeholder=\"\"&gt;\r\n            &lt;label&gt;First Name&lt;\/label&gt;\r\n            &lt;span class=\"focus-bg\"&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;!-- partial --&gt;\r\n  &lt;script src='http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.2.2\/jquery.min.js'&gt;&lt;\/script&gt;\r\n&lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<em><strong>style.css<\/strong><\/em>&#8216; and put these codes given here.<\/p>\n<pre class=\"height-set:true height:750 lang:css decode:true\" title=\"style.css\">\/* Code By Webdevtrick ( https:\/\/webdevtrick.com ) *\/\r\n* {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tbox-sizing: border-box;\r\n}\r\nhtml,\r\nbody {\r\n\tborder: 0;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n\r\nbody {\r\n\tfont: 14px \"Lato\", Arial, sans-serif;\r\n\tmin-width: 100%;\r\n\tmin-height: 100%;\r\n\tcolor: #666;\r\n}\r\n.container {\r\n\tmargin: 0 auto;\r\n\tmax-width: 1200px;\r\n}\r\n.row {\r\n\tfloat: left;\r\n\twidth: 100%;\r\n\tpadding: 20px 0 50px;\r\n}\r\nh2 {\r\n\ttext-align: center;\r\n\tcolor: #5cb85c;\r\n\tfont-size: 28px;\r\n\tfloat: left;\r\n\twidth: 100%;\r\n\tmargin: 30px 0;\r\n\tposition: relative;\r\n\tline-height: 58px;\r\n\tfont-weight: 400;\r\n}\r\nh2:before {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\tbottom: 0;\r\n\twidth: 100px;\r\n\theight: 2px;\r\n\tbackground-color: #5cb85c;\r\n\tmargin-left: -50px;\r\n}\r\n:focus {\r\n\toutline: none;\r\n}\r\n.col-3 {\r\n\tfloat: left;\r\n\twidth: 27.33%;\r\n\tmargin: 40px 3%;\r\n\tposition: relative;\r\n}\r\ninput[type=\"text\"] {\r\n\tfont: 15px\/24px \"Lato\", Arial, sans-serif;\r\n\tcolor: #333;\r\n\twidth: 100%;\r\n\tbox-sizing: border-box;\r\n\tletter-spacing: 1px;\r\n}\r\n.effect-1,\r\n.effect-2,\r\n.effect-3 {\r\n\tborder: 0;\r\n\tpadding: 7px 0;\r\n\tborder-bottom: 1px solid #ccc;\r\n}\r\n.effect-1~.focus-border {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-1:focus~.focus-border {\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-2~.focus-border {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-2:focus~.focus-border {\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n\tleft: 0;\r\n}\r\n.effect-3~.focus-border {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 2px;\r\n\tz-index: 99;\r\n}\r\n.effect-3~.focus-border:before,\r\n.effect-3~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 0;\r\n\theight: 100%;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-3~.focus-border:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n}\r\n.effect-3:focus~.focus-border:before,\r\n.effect-3:focus~.focus-border:after {\r\n\twidth: 50%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-4,\r\n.effect-5,\r\n.effect-6 {\r\n\tborder: 0;\r\n\tpadding: 5px 0 7px;\r\n\tborder: 1px solid transparent;\r\n\tborder-bottom-color: #ccc;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-4:focus,\r\n.effect-5:focus,\r\n.effect-6:focus {\r\n\tpadding: 5px 14px 7px;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-4~.focus-border {\r\n\tposition: absolute;\r\n\theight: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n\tz-index: -1;\r\n}\r\n.effect-4:focus~.focus-border {\r\n\ttransition: 0.4s;\r\n\theight: 36px;\r\n\tborder: 2px solid #03e64c;\r\n\tz-index: 1;\r\n}\r\n.effect-5~.focus-border {\r\n\tposition: absolute;\r\n\theight: 36px;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 0;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-5:focus~.focus-border {\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n\tborder: 2px solid #03e64c;\r\n}\r\n.effect-6~.focus-border {\r\n\tposition: absolute;\r\n\theight: 36px;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\twidth: 0;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-6:focus~.focus-border {\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n\tborder: 2px solid #03e64c;\r\n}\r\n.effect-7,\r\n.effect-8,\r\n.effect-9 {\r\n\tborder: 1px solid #ccc;\r\n\tpadding: 7px 14px 9px;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-7~.focus-border:before,\r\n.effect-7~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-7~.focus-border:after {\r\n\ttop: auto;\r\n\tbottom: 0;\r\n}\r\n.effect-7~.focus-border i:before,\r\n.effect-7~.focus-border i:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\twidth: 2px;\r\n\theight: 0;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.6s;\r\n}\r\n.effect-7~.focus-border i:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n}\r\n.effect-7:focus~.focus-border:before,\r\n.effect-7:focus~.focus-border:after {\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-7:focus~.focus-border i:before,\r\n.effect-7:focus~.focus-border i:after {\r\n\ttop: 0;\r\n\theight: 100%;\r\n\ttransition: 0.6s;\r\n}\r\n.effect-8~.focus-border:before,\r\n.effect-8~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-8~.focus-border:after {\r\n\ttop: auto;\r\n\tbottom: 0;\r\n\tleft: auto;\r\n\tright: 0;\r\n}\r\n.effect-8~.focus-border i:before,\r\n.effect-8~.focus-border i:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 2px;\r\n\theight: 0;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-8~.focus-border i:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n\ttop: auto;\r\n\tbottom: 0;\r\n}\r\n.effect-8:focus~.focus-border:before,\r\n.effect-8:focus~.focus-border:after {\r\n\twidth: 100%;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-8:focus~.focus-border i:before,\r\n.effect-8:focus~.focus-border i:after {\r\n\theight: 100%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-9~.focus-border:before,\r\n.effect-9~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.2s;\r\n\ttransition-delay: 0.2s;\r\n}\r\n.effect-9~.focus-border:after {\r\n\ttop: auto;\r\n\tbottom: 0;\r\n\tright: auto;\r\n\tleft: 0;\r\n\ttransition-delay: 0.6s;\r\n}\r\n.effect-9~.focus-border i:before,\r\n.effect-9~.focus-border i:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 2px;\r\n\theight: 0;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.2s;\r\n}\r\n.effect-9~.focus-border i:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n\ttop: auto;\r\n\tbottom: 0;\r\n\ttransition-delay: 0.4s;\r\n}\r\n.effect-9:focus~.focus-border:before,\r\n.effect-9:focus~.focus-border:after {\r\n\twidth: 100%;\r\n\ttransition: 0.2s;\r\n\ttransition-delay: 0.6s;\r\n}\r\n.effect-9:focus~.focus-border:after {\r\n\ttransition-delay: 0.2s;\r\n}\r\n.effect-9:focus~.focus-border i:before,\r\n.effect-9:focus~.focus-border i:after {\r\n\theight: 100%;\r\n\ttransition: 0.2s;\r\n}\r\n.effect-9:focus~.focus-border i:after {\r\n\ttransition-delay: 0.4s;\r\n}\r\n.effect-10,\r\n.effect-11,\r\n.effect-12,\r\n.effect-13,\r\n.effect-14,\r\n.effect-15 {\r\n\tborder: 0;\r\n\tpadding: 7px 15px;\r\n\tborder: 1px solid #ccc;\r\n\tposition: relative;\r\n\tbackground: transparent;\r\n}\r\n.effect-10~.focus-bg {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground-color: #ededed;\r\n\topacity: 0;\r\n\ttransition: 0.5s;\r\n\tz-index: -1;\r\n}\r\n.effect-10:focus~.focus-bg {\r\n\ttransition: 0.5s;\r\n\topacity: 1;\r\n}\r\n.effect-11~.focus-bg {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 0;\r\n\theight: 100%;\r\n\tbackground-color: #ededed;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n}\r\n.effect-11:focus~.focus-bg {\r\n\ttransition: 0.3s;\r\n\twidth: 100%;\r\n}\r\n.effect-12~.focus-bg {\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\ttop: 0;\r\n\twidth: 0;\r\n\theight: 100%;\r\n\tbackground-color: #ededed;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n}\r\n.effect-12:focus~.focus-bg {\r\n\ttransition: 0.3s;\r\n\twidth: 100%;\r\n\tleft: 0;\r\n}\r\n.effect-13~.focus-bg:before,\r\n.effect-13~.focus-bg:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 0;\r\n\theight: 100%;\r\n\tbackground-color: #ededed;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n}\r\n.effect-13:focus~.focus-bg:before {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n}\r\n.effect-13~.focus-bg:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n}\r\n.effect-13:focus~.focus-bg:after {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n}\r\n.effect-14~.focus-bg:before,\r\n.effect-14~.focus-bg:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tbackground-color: #ededed;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n}\r\n.effect-14:focus~.focus-bg:before {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\theight: 100%;\r\n}\r\n.effect-14~.focus-bg:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n\ttop: auto;\r\n\tbottom: 0;\r\n}\r\n.effect-14:focus~.focus-bg:after {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\theight: 100%;\r\n}\r\n.effect-15~.focus-bg:before,\r\n.effect-15~.focus-bg:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\ttop: 50%;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tbackground-color: #ededed;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n}\r\n.effect-15:focus~.focus-bg:before {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\theight: 100%;\r\n}\r\n.effect-15~.focus-bg:after {\r\n\tleft: auto;\r\n\tright: 50%;\r\n\ttop: auto;\r\n\tbottom: 50%;\r\n}\r\n.effect-15:focus~.focus-bg:after {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\theight: 100%;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n.effect-16,\r\n.effect-17,\r\n.effect-18 {\r\n\tborder: 0;\r\n\tpadding: 4px 0;\r\n\tborder-bottom: 1px solid #ccc;\r\n\tbackground-color: transparent;\r\n}\r\n.effect-16~.focus-border {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-16:focus~.focus-border,\r\n.has-content.effect-16~.focus-border {\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-16~label {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\ttop: 9px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-16:focus~label,\r\n.has-content.effect-16~label {\r\n\ttop: -16px;\r\n\tfont-size: 12px;\r\n\tcolor: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-17~.focus-border {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-17:focus~.focus-border,\r\n.has-content.effect-17~.focus-border {\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n\tleft: 0;\r\n}\r\n.effect-17~label {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\ttop: 9px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-17:focus~label,\r\n.has-content.effect-17~label {\r\n\ttop: -16px;\r\n\tfont-size: 12px;\r\n\tcolor: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-18~.focus-border {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 2px;\r\n\tz-index: 99;\r\n}\r\n.effect-18~.focus-border:before,\r\n.effect-18~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 0;\r\n\theight: 100%;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-18~.focus-border:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n}\r\n.effect-18:focus~.focus-border:before,\r\n.effect-18:focus~.focus-border:after,\r\n.has-content.effect-18~.focus-border:before,\r\n.has-content.effect-18~.focus-border:after {\r\n\twidth: 50%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-18~label {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\ttop: 9px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-18:focus~label,\r\n.has-content.effect-18~label {\r\n\ttop: -16px;\r\n\tfont-size: 12px;\r\n\tcolor: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-19,\r\n.effect-20,\r\n.effect-21 {\r\n\tborder: 1px solid #ccc;\r\n\tpadding: 7px 14px;\r\n\ttransition: 0.4s;\r\n\tbackground: transparent;\r\n}\r\n.effect-19~.focus-border:before,\r\n.effect-19~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: -1px;\r\n\tleft: 50%;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-19~.focus-border:after {\r\n\ttop: auto;\r\n\tbottom: 0;\r\n}\r\n.effect-19~.focus-border i:before,\r\n.effect-19~.focus-border i:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\twidth: 2px;\r\n\theight: 0;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.6s;\r\n}\r\n.effect-19~.focus-border i:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n}\r\n.effect-19:focus~.focus-border:before,\r\n.effect-19:focus~.focus-border:after,\r\n.has-content.effect-19~.focus-border:before,\r\n.has-content.effect-19~.focus-border:after {\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-19:focus~.focus-border i:before,\r\n.effect-19:focus~.focus-border i:after,\r\n.has-content.effect-19~.focus-border i:before,\r\n.has-content.effect-19~.focus-border i:after {\r\n\ttop: -1px;\r\n\theight: 100%;\r\n\ttransition: 0.6s;\r\n}\r\n.effect-19~label {\r\n\tposition: absolute;\r\n\tleft: 14px;\r\n\twidth: 100%;\r\n\ttop: 10px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-19:focus~label,\r\n.has-content.effect-19~label {\r\n\ttop: -18px;\r\n\tleft: 0;\r\n\tfont-size: 12px;\r\n\tcolor: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-20~.focus-border:before,\r\n.effect-20~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-20~.focus-border:after {\r\n\ttop: auto;\r\n\tbottom: 0;\r\n\tleft: auto;\r\n\tright: 0;\r\n}\r\n.effect-20~.focus-border i:before,\r\n.effect-20~.focus-border i:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 2px;\r\n\theight: 0;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-20~.focus-border i:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n\ttop: auto;\r\n\tbottom: 0;\r\n}\r\n.effect-20:focus~.focus-border:before,\r\n.effect-20:focus~.focus-border:after,\r\n.has-content.effect-20~.focus-border:before,\r\n.has-content.effect-20~.focus-border:after {\r\n\twidth: 100%;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-20:focus~.focus-border i:before,\r\n.effect-20:focus~.focus-border i:after,\r\n.has-content.effect-20~.focus-border i:before,\r\n.has-content.effect-20~.focus-border i:after {\r\n\theight: 100%;\r\n\ttransition: 0.4s;\r\n}\r\n.effect-20~label {\r\n\tposition: absolute;\r\n\tleft: 14px;\r\n\twidth: 100%;\r\n\ttop: 10px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-20:focus~label,\r\n.has-content.effect-20~label {\r\n\ttop: -18px;\r\n\tleft: 0;\r\n\tfont-size: 12px;\r\n\tcolor: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-21~.focus-border:before,\r\n.effect-21~.focus-border:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\twidth: 0;\r\n\theight: 2px;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.2s;\r\n\ttransition-delay: 0.2s;\r\n}\r\n.effect-21~.focus-border:after {\r\n\ttop: auto;\r\n\tbottom: 0;\r\n\tright: auto;\r\n\tleft: 0;\r\n\ttransition-delay: 0.6s;\r\n}\r\n.effect-21~.focus-border i:before,\r\n.effect-21~.focus-border i:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 2px;\r\n\theight: 0;\r\n\tbackground-color: #03e64c;\r\n\ttransition: 0.2s;\r\n}\r\n.effect-21~.focus-border i:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n\ttop: auto;\r\n\tbottom: 0;\r\n\ttransition-delay: 0.4s;\r\n}\r\n.effect-21:focus~.focus-border:before,\r\n.effect-21:focus~.focus-border:after,\r\n.has-content.effect-21~.focus-border:before,\r\n.has-content.effect-21~.focus-border:after {\r\n\twidth: 100%;\r\n\ttransition: 0.2s;\r\n\ttransition-delay: 0.6s;\r\n}\r\n.effect-21:focus~.focus-border:after,\r\n.has-content.effect-21~.focus-border:after {\r\n\ttransition-delay: 0.2s;\r\n}\r\n.effect-21:focus~.focus-border i:before,\r\n.effect-21:focus~.focus-border i:after,\r\n.has-content.effect-21~.focus-border i:before,\r\n.has-content.effect-21~.focus-border i:after {\r\n\theight: 100%;\r\n\ttransition: 0.2s;\r\n}\r\n.effect-21:focus~.focus-border i:after,\r\n.has-conten.effect-21~.focus-border i:after {\r\n\ttransition-delay: 0.4s;\r\n}\r\n.effect-21~label {\r\n\tposition: absolute;\r\n\tleft: 14px;\r\n\twidth: 100%;\r\n\ttop: 10px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-21:focus~label,\r\n.has-content.effect-21~label {\r\n\ttop: -18px;\r\n\tleft: 0;\r\n\tfont-size: 12px;\r\n\tcolor: #03e64c;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-22,\r\n.effect-23,\r\n.effect-24 {\r\n\tborder: 0;\r\n\tpadding: 7px 15px;\r\n\tborder: 1px solid #ccc;\r\n\tposition: relative;\r\n\tbackground: transparent;\r\n}\r\n.effect-22~.focus-bg {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 0;\r\n\theight: 100%;\r\n\tbackground-color: transparent;\r\n\ttransition: 0.4s;\r\n\tz-index: -1;\r\n}\r\n.effect-22:focus~.focus-bg,\r\n.has-content.effect-22~.focus-bg {\r\n\ttransition: 0.4s;\r\n\twidth: 100%;\r\n\tbackground-color: #ededed;\r\n}\r\n.effect-22~label {\r\n\tposition: absolute;\r\n\tleft: 14px;\r\n\twidth: 100%;\r\n\ttop: 10px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-22:focus~label,\r\n.has-content.effect-22~label {\r\n\ttop: -18px;\r\n\tleft: 0;\r\n\tfont-size: 12px;\r\n\tcolor: #333;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-23~.focus-bg:before,\r\n.effect-23~.focus-bg:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tbackground-color: #ededed;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n}\r\n.effect-23:focus~.focus-bg:before,\r\n.has-content.effect-23~.focus-bg:before {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\theight: 100%;\r\n}\r\n.effect-23~.focus-bg:after {\r\n\tleft: auto;\r\n\tright: 0;\r\n\ttop: auto;\r\n\tbottom: 0;\r\n}\r\n.effect-23:focus~.focus-bg:after,\r\n.has-content.effect-23~.focus-bg:after {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\theight: 100%;\r\n}\r\n.effect-23~label {\r\n\tposition: absolute;\r\n\tleft: 14px;\r\n\twidth: 100%;\r\n\ttop: 10px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-23:focus~label,\r\n.has-content.effect-23~label {\r\n\ttop: -18px;\r\n\tleft: 0;\r\n\tfont-size: 12px;\r\n\tcolor: #333;\r\n\ttransition: 0.3s;\r\n}\r\n.effect-24~.focus-bg:before,\r\n.effect-24~.focus-bg:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tleft: 50%;\r\n\ttop: 50%;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tbackground-color: #ededed;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n}\r\n.effect-24:focus~.focus-bg:before,\r\n.has-content.effect-24~.focus-bg:before {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\theight: 100%;\r\n}\r\n.effect-24~.focus-bg:after {\r\n\tleft: auto;\r\n\tright: 50%;\r\n\ttop: auto;\r\n\tbottom: 50%;\r\n}\r\n.effect-24:focus~.focus-bg:after,\r\n.has-content.effect-24~.focus-bg:after {\r\n\ttransition: 0.3s;\r\n\twidth: 50%;\r\n\theight: 100%;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n.effect-24~label {\r\n\tposition: absolute;\r\n\tleft: 14px;\r\n\twidth: 100%;\r\n\ttop: 10px;\r\n\tcolor: #aaa;\r\n\ttransition: 0.3s;\r\n\tz-index: -1;\r\n\tletter-spacing: 0.5px;\r\n}\r\n.effect-24:focus~label,\r\n.has-content.effect-24~label {\r\n\ttop: -18px;\r\n\tleft: 0;\r\n\tfont-size: 12px;\r\n\tcolor: #333;\r\n\ttransition: 0.3s;\r\n}<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step create a JavaScript file named &#8216;<em><strong>function.js<\/strong><\/em>&#8216; and put the codes.<\/p>\n<pre class=\"lang:js decode:true \" title=\"function.js\">\/\/ Code By Webdevtrick ( https:\/\/webdevtrick.com )\r\n\/\/ for label effects\r\n\t$(window).load(function(){\r\n\t\t$(\".col-3 input\").val(\"\");\r\n\t\t\r\n\t\t$(\".input-effect input\").focusout(function(){\r\n\t\t\tif($(this).val() != \"\"){\r\n\t\t\t\t$(this).addClass(\"has-content\");\r\n\t\t\t}else{\r\n\t\t\t\t$(this).removeClass(\"has-content\");\r\n\t\t\t}\r\n\t\t})\r\n\t});<\/pre>\n<p>That&#8217;s It. Now you have successfully created <strong>CSS Input Focus &amp; Placeholder Effects<\/strong>, <strong>Custom Input Animations<\/strong>. If you have any doubt or questions comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create different types of input focus and placeholder effects using HTML CSS? Solution: See this CSS Input Focus &amp; Placeholder Effects, Custom Input Animations. Previously I have shared some input programs, but this is about placeholder and focus animation. There are many kinds of border, background, placeholder animation, which you will see [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3637,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42],"tags":[],"class_list":["post-3636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Input Focus &amp; Placeholder Effects | Custom Input Animations<\/title>\n<meta name=\"description\" content=\"Want to create multiple input animation? Check out this CSS Input Focus &amp; Placeholder Effects, Custom Input Animations. Get source code now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Input Focus &amp; Placeholder Effects | Custom Input Animations\" \/>\n<meta property=\"og:description\" content=\"Want to create multiple input animation? Check out this CSS Input Focus &amp; Placeholder Effects, Custom Input Animations. Get source code now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-14T17:06:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-27T16:44:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"CSS Input Focus &#038; Placeholder Effects | Custom Input Animations\",\"datePublished\":\"2019-10-14T17:06:21+00:00\",\"dateModified\":\"2019-11-27T16:44:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/\"},\"wordCount\":540,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg\",\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/\",\"url\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/\",\"name\":\"CSS Input Focus & Placeholder Effects | Custom Input Animations\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg\",\"datePublished\":\"2019-10-14T17:06:21+00:00\",\"dateModified\":\"2019-11-27T16:44:32+00:00\",\"description\":\"Want to create multiple input animation? Check out this CSS Input Focus & Placeholder Effects, Custom Input Animations. Get source code now.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg\",\"width\":1200,\"height\":630,\"caption\":\"css input focus placeholder effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Input Focus &#038; Placeholder Effects | Custom Input Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Input Focus & Placeholder Effects | Custom Input Animations","description":"Want to create multiple input animation? Check out this CSS Input Focus & Placeholder Effects, Custom Input Animations. Get source code now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/","og_locale":"en_US","og_type":"article","og_title":"CSS Input Focus & Placeholder Effects | Custom Input Animations","og_description":"Want to create multiple input animation? Check out this CSS Input Focus & Placeholder Effects, Custom Input Animations. Get source code now.","og_url":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-10-14T17:06:21+00:00","article_modified_time":"2019-11-27T16:44:32+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"CSS Input Focus &#038; Placeholder Effects | Custom Input Animations","datePublished":"2019-10-14T17:06:21+00:00","dateModified":"2019-11-27T16:44:32+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/"},"wordCount":540,"commentCount":1,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg","articleSection":["CSS","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/","url":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/","name":"CSS Input Focus & Placeholder Effects | Custom Input Animations","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg","datePublished":"2019-10-14T17:06:21+00:00","dateModified":"2019-11-27T16:44:32+00:00","description":"Want to create multiple input animation? Check out this CSS Input Focus & Placeholder Effects, Custom Input Animations. Get source code now.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/input-focus-placeholder-effects.jpg","width":1200,"height":630,"caption":"css input focus placeholder effects"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/css-input-focus-placeholder-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"CSS Input Focus &#038; Placeholder Effects | Custom Input Animations"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/3636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=3636"}],"version-history":[{"count":16,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/3636\/revisions"}],"predecessor-version":[{"id":3654,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/3636\/revisions\/3654"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/3637"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=3636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=3636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=3636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}