-
Easy to Use
You can add elegant custom form elements to your page with just a few lines of code.
-
Wide Customization
With many JavaScript options available, you can customize every form element state with CSS.
-
Accessibility
The script unobtrusively supports keyboard navigation.
-
RTL Support
Right-to-left languages are also supported and form elements can be customized using CSS.
-
API
With a powerful yet simple API, you can combine this script with others.
-
Modular System
The script is designed to be modular, so you can add other HTML5 form elements.
JCF
Easy form elements customization
This JavaScript tool allows smooth cross-browser customization of form elements with CSS.
Select
Styling the select area and dropdown menu items is no longer a pain. Take advantage of the keyboard navigation, custom scrollbars, and images support to customize your select form just like you want.
Range and Number Inputs
The latest HTML5 inputs are supported, so you can add custom horizontal and vertical range sliders and fine-tuned number input forms with just a few lines of code.
Checkboxes and Radios
Both focused and pressed states are easily handled, so you can style your checkboxes and
radio-buttons effortlessly.
File Input
With all semantic and behavioral qualities supported, you can customize your file input forms and be sure they are accessible and work flawlessly in all popular browsers.
Scrollbars
With JCF, you can improve the look and feel of vertical and horizontal scrollbars
to match your UI design. Nested scrollbars are also supported and can be applied on a textarea.
Plain HTML
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.
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.
Textarea
About
Usage
The script requires jQuery to work properly. To add the script to your page, simply attach the core file jcf.js and the 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 call the function:
$(function() {
jcf.replaceAll();
});
Why jQuery?
You can customize form elements with pure JavaScript, but you will have to provide cross-browser support for custom events, touch and mouse handling, event delegation systems etc.
All of them are built into a popular jQuery framework used in many sites. It significantly reduces the amount of code needed and is more convenient for developers who have used jQuery.
Browser Support
- Firefox
- Chrome
- Safari
- Opera
- Windows RT Tablets
- Android 8+
- iOS7+
- Edge
FAQ
How does it work?
This script is unobtrusive, so it will work with original form elements. The approach is to hide native controls and display HTML equivalents, which synchronizes its state with the native form field. This behavior allows customization with CSS.
How much does it cost?
The script is free. It is released under the MIT license.
Is it good to customize form elements with JavaScript?
Of course, it would be better to do this without JavaScript, but for now it can't be done in all browsers without the help of JavaScript.
Can I create my own custom form elements with the help of this script?
Yes, you can! Just take a look at the docs and use any of the existing modules as a boilerplate.
Where is the documentation?
Check the documentation at GitHub.
Can I ask for a new functionality or report a bug?
Yes! Use GitHub.
What's new in the latest release?
Please see the changelog.
What is PSD2HTML?
Founded in 2005, PSD2HTML is the world's largest professional PSD to HTML coding company.
Download in progress.
Enter your email to get deals and news from PSD2HTML.
CloseThank you! 
Please check and confirm your email.