One of the most amazing things about the Web is its diversity. You can make your website stand out, and be bold and creative. Everything is easily customizable. Well, except for tiny elements, like checkboxes and radio buttons. Actually, with cross-browser compatibility in mind, styling them can be a real challenge.
Customization with CSS3
If all you need to do is customize typical form elements — like checkbox, radio, or select — and you don’t need to style the select dropdown menu of your <select> tag; you can use pure CSS.
- Simple. You don’t need anything but HTML/CSS. Just write a couple of lines in CSS and change the HTML structure.
- Precise. These custom elements will always correspond to the state of the real form elements and behave the same way.
- Limited browser support. Styling of <select> works in a limited manner in IE9-10, and there’s no cross-browser styling for other elements, such as scrollbars.
- Bloated HTML. You cannot style the form element itself, so you have to add blank <span> and apply styles to it.
- HTML dependant. This approach doesn’t work when you can’t change the HTML structure of your form (like when the form is generated by some third-party service).
- Concise HTML. It eliminates the need to create empty elements or wrappers in HTML.
- Wide customization. It allows the styling of any form elements, including scrollbars. Plus, you can style your dropdown lists by adding custom effects to a dropdown menu.
- Additional updates. If the state of a form element is changed by a third-party script, and not by the user, the state of the corresponding fake element has to be updated.
As you can see, some solutions don’t support the keyboard or focus functionality, some lack customization flexibility, and others don’t support mobile devices. All this has made customization of form element a really frustrating task. Until we’ve hit upon the answer.
Meet JCF by PSD2HTML®
Supported form elements:
- <input type=”checkbox”>
- <input type=”radio”>
- <input type=”file”>
- <input type=”number”>
- <input type=”range”>
- Scrollbar customization
- IE8+ (but it can also work in older IE versions)
- Windows Phone 8+
- Android 4+