We have a number of forms in this code. Each of these forms has an icon to its left. Clicking on any of these forms creates a blue shadow around that form. Simultaneously with the production of the blue shade, the input form of the input icon also turns blue. Their inputs and icons are normally gray.
HTML
<!-- This script got from www.devanswer.com -->
<header class="ScriptHeader">
<div class="rt-container">
<div class="col-rt-12">
<div class="rt-heading">
<h1>Font Awesome Icon Inside Input Fields Example</h1>
<p>The following form contains the inputs with icon inside.</p>
</div>
</div>
</div>
</header>
<section>
<div class="rt-container">
<div class="col-rt-12">
<div class="Scriptcontent">
<form class="cd-form">
<div class="inputWithIcon">
<input type="text" placeholder="Your name">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>
<div class="inputWithIcon">
<input type="text" placeholder="Email">
<i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i>
</div>
<div class="inputWithIcon">
<input type="text" placeholder="Phone Number">
<i class="fa fa-phone fa-lg fa-fw" aria-hidden="true"></i>
</div>
<div class="inputWithIcon inputIconBg">
<input type="text" placeholder="Your name">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>
<div class="inputWithIcon inputIconBg">
<input type="text" placeholder="Email">
<i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i>
</div>
<div class="inputWithIcon inputIconBg">
<input type="text" placeholder="Phone Number">
<i class="fa fa-phone fa-lg fa-fw" aria-hidden="true"></i>
</div>
<input type="text" placeholder="Age">
</form>
</div>
</div>
</div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900');
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
article, header, section, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
body {
background: #cbcbf2 none repeat scroll 0 0;
color: #222;
font-size: 100%;
line-height: 24px;
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
}
a {
font-family: "Raleway", sans-serif;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #373e18;
}
section {
float: left;
width: 100%;
padding-bottom: 3em;
}
h2 {
color: #1a0e0e;
font-size: 26px;
font-weight: 700;
margin: 0;
line-height: normal;
text-transform: uppercase;
}
h2 span {
display: block;
padding: 0;
font-size: 18px;
opacity: 0.7;
margin-top: 5px;
text-transform: uppercase;
}
#float-right {
float: right;
}
.ScriptTop {
background: #fff none repeat scroll 0 0;
float: left;
font-size: 0.69em;
font-weight: 600;
line-height: 2.2;
padding: 12px 0;
text-transform: uppercase;
width: 100%;
}
/* To Navigation Style 1*/
.ScriptTop ul {
margin: 24px 0;
padding: 0;
text-align: left;
}
.ScriptTop li {
list-style: none;
display: inline-block;
}
.ScriptTop li a {
background: #6a4aed none repeat scroll 0 0;
color: #fff;
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 5px 18px;
text-decoration: none;
text-transform: capitalize;
}
.ScriptTop li a:hover {
background: #000;
color: #fff;
}
.ScriptHeader {
float: left;
width: 100%;
padding: 2em 0;
}
.rt-heading {
margin: 0 auto;
text-align: center;
}
.Scriptcontent {
line-height: 28px;
}
.ScriptHeader h1 {
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
color: #6a4aed;
font-size: 26px;
font-weight: 700;
margin: 0;
line-height: normal;
}
.ScriptHeader h2 {
color: #312c8f;
font-size: 20px;
font-weight: 400;
margin: 5px 0 0;
line-height: normal;
}
.ScriptHeader h1 span {
display: block;
padding: 0;
font-size: 22px;
opacity: 0.7;
margin-top: 5px;
}
.ScriptHeader span {
display: block;
padding: 0;
font-size: 22px;
opacity: 0.7;
margin-top: 5px;
}
.rt-container {
margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
}
.rt-row:before, .rt-row:after {
display: table;
line-height: 0;
content: "";
}
.rt-row:after {
clear: both;
}
[class^="col-rt-"] {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
padding: 0 15px;
min-height: 1px;
position: relative;
}
@media (min-width: 768px) {
.rt-container {
width: 750px;
}
[class^="col-rt-"] {
float: left;
width: 49.9999999999%;
}
.col-rt-6, .col-rt-12 {
width: 100%;
}
}
@media (min-width: 1200px) {
.rt-container {
width: 1170px;
}
.col-rt-1 {
width: 16.6%;
}
.col-rt-2 {
width: 30.33%;
}
.col-rt-3 {
width: 50%;
}
.col-rt-4 {
width: 67.664%;
}
.col-rt-5 {
width: 83.33%;
}
}
@media only screen and (min-width:240px) and (max-width: 768px) {
.ScriptTop h1, .ScriptTop ul {
text-align: center;
}
.ScriptTop h1 {
margin-top: 0;
margin-bottom: 15px;
}
.ScriptTop ul {
margin-top: 12px;
}
.ScriptHeader h1, .ScriptHeader h2, .scriptnav ul {
text-align: center;
}
.scriptnav ul {
margin-top: 12px;
}
#float-right {
float: none;
}
}
.cd-form{
max-width: 640px;
background: #fff;
margin: 0 auto;
padding: 15px 25px;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
input[type="text"] {
width: 100%;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.inputWithIcon input[type="text"] {
padding-left: 40px;
}
.inputWithIcon {
position: relative;
}
.inputWithIcon i {
position: absolute;
left: 0;
top: 8px;
padding: 9px 8px;
color: #aaa;
transition: 0.3s;
}
.inputWithIcon input[type="text"]:focus + i {
color: dodgerBlue;
}
.inputWithIcon.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 4px;
border-radius: 4px 0 0 4px;
}
.inputWithIcon.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
