# JavaScript Custom Forms

This library allows crossbrowser form elements customization using CSS.

Supported elements are following: select, checkbox, radio, file input, textarea and scrollbars (and more coming)

## Number inputs

## Range inputs

Default range input:
Disabled range input:
With "min", "max" and "step" attributes:
HTML5 Datalist test:
With "multiple" attribute:
Vertical slider:
0 10 11 15 30 50 90 100
Vertical range slider:

## <select>

Select module provides an ability to customize not only select area but also its dropdown. Multiple selects, keyboard navigation and custom scrollbars are supported in the option list.

## Checkboxes and radios

Focused and pressed states are also handled.

Unchecked
Checked
Disabled
Disabled checked
Unchecked
Checked
Disabled

## File input

Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.

Normal:
Custom:
Disabled:

## Scrollbars

Scrollbars can be either vertical or horizontal. Nested scrollbars are supported. Can be applied on textarea.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur saepe nostrum quas enim, tenetur unde ut. Eum aspernatur, sunt enim ea magni repellat debitis, sequi recusandae temporibus explicabo minus eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, fuga modi tempora id voluptatibus, nostrum quae nihil quam dignissimos praesentium et totam repudiandae sequi magnam numquam reprehenderit animi ea. END.

## Browser support

The script was tested in the following browsers:

- Internet Explorer 8+
- Firefox
- Chrome
- Safari
- Opera
- Windows RT Tablets
- Android 4+
- iOS7+

## Usage

The script requires jQuery 1.7+ to work properly. To add script in your page simply attach core file - `jcf.js` and some of modules you want to use for customization:

    <script src="js/jquery.js"></script>
    <script src="js/jcf.js"></script>
    <script src="js/jcf.select.js"></script>
    <script src="js/jcf.radio.js"></script>
    <script src="js/jcf.checkbox.js"></script>

When the page is loaded all you have to do is simply call the function:

    $(function() {
    	jcf.replaceAll();
    });

## License

This script is licensed under the MIT License

Copyright 2014-2015 PSD2HTML.com