Material Design Styled Text Fields with jQuery and CSS3

File Size: 48.1 KB
Views Total: 13202
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Material Design Styled Text Fields with jQuery and CSS3

A tiny jQuery plugin that adds cool CSS3 powered user interaction effects to your form fields, following the Google Material Design specification. Works with jzaefferer's jQuery validation plugin to provide client-side visual input validation.

How to use it:

1. Load the needed jQuery library and the jQuery validation plugin in your web page.

<script src="//"></script>
<script src="js/jquery.validate.min.js"></script>

2. Load the jQuery Material Form Fields plugin's files in the web page.

<link href="css/jquery.material.form.css" rel="stylesheet">
<script src="js/jquery.material.form.js"></script>

3. Add text fields into your form as follow.

<form action="" class="material">
  <input type="email" placeholder="E-mail" required>
  <input type="text" placeholder="Name">
  <textarea placeholder="Message"></textarea>
  <select name="mySelect" placeholder="Select one of these">
    <option value="1">Option</option>
    <option value="2">Super option</option>
    <option value="3" selected>Awesome option</option>
    <option value="4">WORST option ever</option>
  <select name="mySelects" placeholder="You can select multiple" multiple>
    <option value="1">Option</option>
    <option value="2" selected>Super option</option>
    <option value="3" selected>Awesome option</option>

4. Initialize the plugin.



    errorPlacement: function(error, element) {}


Change logs:


  • Checkbox and radio button added


  • Checkbox and radio button added

This awesome jQuery plugin is developed by emilsgulbis. For more Advanced Usages, please check the demo page or visit the official website.