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
<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.
File input
Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.
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!
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