Fork me on GitHub

Inputs 0.9.2

HTML form inputs with pure CSS and a little bit JS magic.

Current CSS styles was inspired by Google Material designs. It uses pure CSS with a minimum number of HTML elements and has size less than 8 kB! The projects uses LESS and have a structured set of HTML input styles. So you can easy use 'standalone' radio/checkbox or select styles in your project. Supports all modern desktop and mobile browsers including IE9+.

How to use it

Just include <framework>-inputs-min.css and inputs-min.js to your project and wrap your inputs with .input element.

Inputs with text type support.


You can use placeholder attribute to set placeholder. Warning: You must place label element right after input element.

<div class='input'>
  <input type='text' id="input1" placeholder='Type your first name'>
  <label for="input1">First Name</label>
</div>
MM/DD/YYYY

You can add .error class to input to show error state. Add .help-block element to show error message.

<div class='input'>
  <input type='text' id="input2" class='error'>
  <label for="input2">Birtday</label>
  <span class='help-block'>MM/DD/YYYY</span>
</div>

Inputs with email, password type support.


Enter at least 8 symbols

Use .help-block element to show hints.

<div class='input'>
  <input type='password' id="password1">
  <label for="password1">Password</label>
  <span class='help-block'>Enter at least 8 symbols</span>
</div>

Textarea input support.

<div class='input'>
  <textarea id="input3" rows=3></textarea>
  <label for="input3">Describe Youself</label>
</div>

Select input support.


You should add .select class to parent element.

<div class="input select">
  <select id='select1'>
    <option>...</option>
  </select>
  <label for='select1'>Best CSS framework</label>
</div>

Inputs with checkbox type support.


<div class='input'>
  <input type='checkbox' id='input4'>
  <label for="input4">Check if you like it</label>
</div>

Inputs with radio type support.


You can make inline radio/checkboxes by removing .input wrapper.

<div class='input'>
  <input type='radio' id='input5' name='radio' checked>
  <label for="input5">Option one is for serious guys</label>
</div>
...

Javascript functions

If you change input value programaticaly you run into problem that label is freezes. To fix it run refresh() method on the input:

$('#input1').val('new value').refresh();

Customization

You can customize controls using overriding the following LESS variables:

@label-color: #555;
@label-font: 'Helvetica Neue';
@input-font: 'Helvetica Neue';
@placeholder-font: normal 300 100% 'Helvetica Neue';
@placeholder-color: #999;
@help-color: #999;
@error-color: #a94442;
@input-border: #ccc;
@input-bg: #fff;
@input-color: #555;
@input-focus-color: #66afe9;
@checkbox-color: #666;
@checkbox-checked-color: #5cb85c;
@checkbox-border-width: 2px;
@checkbox-mark-width: 2px;
@radio-color: #666;
@radio-border-width: 2px;
@radio-checked-color: #5bc0de;

You can get package via Bower: bower install inputs --save-dev

CSS Frameworks Support

Inputs doesn't rely on some specific CSS framework so you can easily use it in any CSS framework as you like. For example:

Use without any CSS framework Use with Bootstrap Use with Pure CSS

Coded by Nick Zhebrun. AnjLab, 2014.