Material Design Inspired Custom Html Inputs with CSS & Javascript

Category: Form , Javascript | December 6, 2014
Author: anjlab
Views Total: 13,793 views
Official Page: Go to website
Last Update: December 6, 2014
License: MIT


Material Design Inspired Custom Html Inputs with CSS & Javascript


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>

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>

You Might Be Interested In:

Leave a Reply