December 3, 2014 8:50 am

Make a game like effects to input fields with jQuery plugin

If you ever wanted to add some effects to your form input fields to make it look like video games fields, you are in the right place . It’s really one of the most outstanding jQuery styling plugins that I ever stumbled upon. Today we will be viewing the FancyInput plugin and applying some of it’s great effects.

Make a game like effects to your form input fields with this awesome jQuery plugin

Using it is so simple and straightforward as follows:

Step 1 – Download the plugin from, extract it in the same folder that includes your HTML file. The extraction will create a folder called fancyInput-master.

Step 2 – Include the jQuery library and link the following two css files in the <head> tag.

Step 3 – Create an input field wrapped in a div tag and assign a class to it.

Step 4 – Include this JS file before the end of the <body> tag.

Step 5 – Call the fancyInput() function with the desired effect number (from 0 to 4).

For a full page example with all the 5 effects view the demo or download the files.


– The plugin effects can be also applied to text areas.


– The plugin doesn’t support internet explorer browsers.

I hope you guyz like this simple plugin tutorial and please share this with your friends and write your reviews in comments.

Author Amr Abdou

A full-stack web developer, Linux enthusiast, freelance tech writer & open-source supporter. Loves finding quit corners in public places or cafes accompanied by his laptop to try changing the world from there. You can check his latest works at or follow him on facebook, twitter, Linkedin or Google+

Tutorial Categories:
  • alignwebs

    Nice tut 🙂

  • Nice

  • Vaibhav

    Nice tut… but when we select the text of input field it’s not covered the full text of input.