How to Create Login Form with CSS3 and jQuery

Topic: CSS3 & jQuery

Difficulty: Intermediate / Advanced

Estimated Completion Time: 45 mins

In this tutorial we will code the Login Form that you can find in Futurico UI Pro made byVladimir
Kudinov. To create it we will use CSS3 and jQuery.

Step 1 – HTML Markup

Let’s start creating the HTML markup. Create a form with four inputs (for username, password, checkbox and submit) and wrap the checkbox input and label in a span tag, we will use the span tag to style the checkbox. To finish wrap
the form and the title with a div tag and give it the class of “login-form”.

Step 2 – General CSS Styles

First we will remove all the margins, paddings, borders, etc. from the elements that we will use.

Then we will style the form container. We will add a relative position, a fixed width and height, background color, rounded corners and some shadows.

To create the arrow we will use the :before selector to insert it on the page.

For the form title we will add some basic styles (color, font family and size, etc.).

Step 3 – General Input Styles

First we will give the basic styles to the inputs.

Then we will style the user and password input. We will add a gray background gradient and some shadows. We will also add fixed 170px width and a color for the text.

For the hover state we will only change the shadows of the inputs.

And for the active state we will change the CSS3 gradient to a lighter one.

Step 4 – Submit Button

Position the submit button to the right by using the float property.

For the hover state we will change the shadows and for the active state we will remove them.

Add we’ll add a green gradient to the button.

Step 5 – Checkbox Styling

Now we will start the most difficult part because we can’t style the checkboxes inputs using CSS like we have styled the other form inputs.

The easiest way that I’ve found to style it using only CSS it’s by replacing the checkbox input with a span tag.

This will work this way: first we will hide the checkbox input and style the span tag like a checkbox and then we will update the checkbox using jQuery. So when we will click on the span tag jQuery will update the checkbox input to selected,
and when we will click again the span tag jQuery will remove the “checked” from the checkbox input.

As some users may have the JavaScript disabled we need to add a fallback. To do that we will add with jQuery a “js” class to the body tag. So if the JavaScript will be enabled on the page load it will add a “js” class to the body and if the
JavaScript is disabled the class will not be added. So only the users with JavaScript enabled will have the custom styled checkbox.

First we will hide the checkbox input.

Then we will position the span tag.

Now we will add some basic styles to the span.

To create the “checked” state to the span we will create a smallest box and will position it in the middle.

To style the label we will position it to the right of the checkbox and add some basic styles(font, color, etc.).

All the styles that have the “js” class at the beginning will only be applied if JavaScript is enabled.

Step 6 – jQuery

First we will link to jQuery library using the last version hosted by Google, if you want you can host it on your own server, it’s your choice. Next add the following code to the bottom of your HTML file just before the </body> closing
tag.

First we’ll add the “js” class to the body tag.

Then we will make the checkbox “checked” by default on load.

With this code we will check if the checkbox is checked and if the result is false the checked class will be removed from the span and if the result is “true” the checked class will be added to the span tag.

Conclusion

Congrats! You’ve finished this tutorial. I hope it was useful for you and you liked it. Don’t forget to leave some feedback in the comments and subscribe us.