So you might have stumbled across quite fancy looking form fields and would have wondered how does this stuff actually work.
So we are going to start by making a simple form field which I made for one of my Login form(Click here to have a look at the form),the image has been attached below so you could get a basic idea what we would actually be making in this article.
Okay so firstly we are going to work on the initial state of the form field which would be when the form field is out of focus.Before doing anything else we should ofcourse make a form field in our html the code for which is given below.
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Your Name">
Now let's get back to editing it via CSS,lets get started by adding an image to our form field for this purpose we would use background image,note that we would be customizing input#username which would mean that we are customizing our input field whose id is username
input#username {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
background-size:25px 80%;
text-indent: 32px;
}
Related Articles:
So what I actually did here is use the image from the link,added no repeat to it because of the fact that I didn't want my image to be repeated again and again through out the text field,for the positioning of the image I used background-position,background-size for ofcourse the size of the background image and the reason for the text-indent is that I don't want my text or placeholder to overlap the image therefore I moved it a bit using text-indent.
So now my form field looks like this
We get a form field which looks something like this
So the code when input is on focus or active becomes:
The overall code becomes:
So we are going to start by making a simple form field which I made for one of my Login form(Click here to have a look at the form),the image has been attached below so you could get a basic idea what we would actually be making in this article.
 |
| Great Stuff? huh? |
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Your Name">
Now let's get back to editing it via CSS,lets get started by adding an image to our form field for this purpose we would use background image,note that we would be customizing input#username which would mean that we are customizing our input field whose id is username
input#username {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
background-size:25px 80%;
text-indent: 32px;
}
Related Articles:
Glassy Login and Registration form V1.0 (Fully Responsive and based on Bootstrap)
Fully Responsive Skype like login form(Can be closed and minimized)
So what I actually did here is use the image from the link,added no repeat to it because of the fact that I didn't want my image to be repeated again and again through out the text field,for the positioning of the image I used background-position,background-size for ofcourse the size of the background image and the reason for the text-indent is that I don't want my text or placeholder to overlap the image therefore I moved it a bit using text-indent.
So now my form field looks like this
Now lets edit the background and stuff,for this purpose we would be adding these lines to our code
background-color:rgba(255,255,255,0.1);
If you want to understand how rgba works Click Here.
Adding the above line would make our field look like this
Now we would remove the borders by using
border-style:none;
It becomes this
Now if you want you could make the placeholder text bolder using
font-weight:bold;
We get a form field which looks something like this
input#username {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
text-indent: 32px;
background-color:white;
background-color:rgba(255,255,255,0.1);
background-size:25px 80%;
font-weight:bold;
border-style:none;
}
If you want your form field to look like this even while you are typing text and stuff in it,your work is done and you can leave this article but for those who wants to change how it look when you click it you need to read further,so now what we would be doing is customizing the form field when it is active or when it is in focus for this we would use
input#username:active,input#username:focus{
}
So,now I want to change the color of form field on click so I would add
background-color:white;
also I would like to remove that image from the form field on click so for this purpose I used
background-image:none;
and also I changed the font from bold to normal style using
font-weight:normal;
So the code when input is on focus or active becomes:
input#username:active,input#username:focus{
background-color:white;
background-image:none;
font-weight:normal;
}
The overall code becomes:
input#username {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
text-indent: 32px;
background-color:white;
background-color:rgba(255,255,255,0.1);
background-size:25px 80%;
font-weight:bold;
border-style:none;
}
input#username:active,input#username:focus{
background-color:white;
background-image:none;
font-weight:normal;
}
Now if you want to add smooth transition effects add the following lines to input#username
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
So my final code becomes
input#username {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
text-indent: 32px;
background-color:white;
background-color:rgba(255,255,255,0.1);
background-size:25px 80%;
font-weight:bold;
border-style:none;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
}
input#username:active,input#username:focus{
background-color:white;
background-image:none;
font-weight:normal;
}
Using this method you can easily customize your form field,you can change color of text,font,text-shadow,box-shadow etc. The possibilities are endless,the only limitation is your mind.
Post your pieces of work in the comment section below.
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
0 comments: