Material Design Inspired Custom Html Inputs with CSS & Javascript

Preview:

Description:

Helps you create custom Html controls (text fields, checboxes, radio buttons) inspired the Google Material Design guidelines. Works perfect with Bootstrap CSS framework and compatible with any modern browsers including IE 9+.

Basic Usage:

Include the generic-inputs.css and inputs.js into your document.

<link href='dist/css/generic-inputs.css' rel='stylesheet'>
<script src='dist/js/inputs.js'></script>

If you’re using Bootstrap CSS framework, include the bootstrap-inputs.css instead.

<link href='dist/css/bootstrap-inputs.css' rel='stylesheet'>
<script src='dist/js/inputs.js'></script>

Create text fields with floating labels.

<div class='form-group'>
  <input type='text' id="input1" placeholder='Type your first name'>
  <label for="input1">First Name</label>
</div>

Create custom radios and checkboxes.

<div class='form-group'>
  <input type='checkbox' id='input2'>
  <label for="input2">Check if you like it</label>
  <input type='radio' id='input3' name='radio' checked>
  <label for="input3">Option one is for serious guys</label>
</div>