This code segment emphasize on creating input form elements that consists of Icons. There is Email field, Name Field, Contact Name and Address fields so we have to put icon inside the form fields.
To put icon inside the form field, we have to fetch form field using id and then use CSS to set background inside the form fields using it’s background properties :
background-image:url(.....);
background-repeat:no-repeat;
background-position:6px;
So, just view its Live Demo , download the code and attach it to your website to make it attractive.
HTML File: formicon.html
We are creating a contact form using HTML. Form is defined in Div name “first”.
<!DOCTYPE html>
<html>
<head>
<title>Icon inside Input Field - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<link href="css/formicon.css" rel="stylesheet">
</head>
<!-- Include CSS File Here -->
<body>
<div id="first">
<img id="logo" src="images/logo.png">
<label>Full Name :</label>
<input id="fname" placeholder="Full Name" type="text">
<label>Email :</label>
<input id="email" placeholder="Email" type="text">
<label>Contact Number :</label>
<input id="contact" placeholder="Contact Number" type="text">
<label>Address :</label>
<input id="address" placeholder="Address" type="text">
<input id="submit" type="submit" value="Submit">
</div>
</body>
</html>
CSS File: formicon.css
Styling form fields elements and placing icons inside it .
/* Below line is used to import font-family: Raleway from Google Fonts (optional)*/
@import "http://fonts.googleapis.com/css?family=Raleway";
body{
font-family:'Raleway',sans-serif
}
img#logo{
margin-left:90px
}
div#first{
width:350px;
height:auto;
margin:50px auto 0;
padding:20px 25px;
background-color:#EEE;
color:#333;
border:2px solid #C2D6FF;
border-radius:5px;
border-radius:40px 0 40px 0
}
label{
font-size:15px;
font-weight:700
}
input#fname{
background-image:url(../images/icon_name.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser*/
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser*/
}
input#email{
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser*/
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser*/
}
input#contact{
background-image:url(../images/mobile.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser*/
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser*/
}
input#address{
background-image:url(../images/home.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser*/
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser*/
}
input#submit{
background-color:#FF9980;
border-radius:5px;
border:none;
padding:10px 25px;
color:#FFF;
text-shadow:1px 1px 1px #949494;
margin-left:120px
}
input#submit:hover{
background-color:#80A24A
}
Conclusion:
So, in this blog post we have learned to place icons inside the form fields elements. Hope you find it easy if have any issues do reply in the comments.
Have a look on some more related stuffs –
- CSS Background
- 12 Inspiring Form Designs You Will Love To See
4 Replies to “Form Field Elements having Icon Inside it”
great .. tnx
Thanks for reading our blog…..!
Thanks for making this technique so clearly understood. You really help me to understand how I can achieve these results. In my case i needed to embed the graphics into my stylesheet, so I simply used an online tool to convert the .pngs to base64 string and everything working perfectly.
Thanks,
Chris
I have done as seen in above post, however now when typing in the form fields the writing cannot be seen what can i do to resolve this?