Form element customization made easy

Categories Articles

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.

There are two major approaches to form elements styling: CSS3 or JavaScript. Let’s take a look at the benefits and limitations of each of them.

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.

Pros:

  • 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.
  • Correct. You will always get the correct performance when JavaScript is disabled.

Cons: 

  • 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).

Customization with JavaScript

jcf_600

JavaScript supports older browser versions, provides more features for form styling, and doesn’t have the limitations of the CSS approach.

Pros:  

  • Cross-browser compatibility. This approach supports any browser version that works with JavaScript.
  • 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.

Cons:

  • JavaScript dependant. Styling won’t work if JavaScript is disabled.
  • 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.
  • Limited keyboard/mouse support. In some cases, JavaScript will not emulate the native behavior and reaction of form elements to keyboard and mouse events.

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®

JCF (JavaScript Custom Forms) is a one of its kind script developed by the PSD2HTML® team. It allows easy customization of form elements while maintaining cross-browser compatibility on both desktop and mobile screens. JCF is absolutely FREE and available under the MIT license.

JCF is a combined approach that maximizes benefits and minimizes limitations. JavaScript is used either in a very limited manner, just to make a lightweight CSS-customization of form elements, or to its full potential to allow flexible customization of the form elements that are hardly customizable, like, for example, select dropdown.

Supported form elements:

  • <select>
  • <input type=”checkbox”>
  • <input type=”radio”>
  • <input type=”file”>
  • <input type=”number”>
  • <input type=”range”>
  • Scrollbar customization

Supported Browsers:

  • Chrome
  • Firefox
  • Safari
  • IE8+ (but it can also work in older IE versions)
  • Windows Phone 8+
  • Android 4+
  • iOS7+

Make sure to check out the live demo and documentation on GitHub. Feel free to ask any questions. As always, your comments are greatly appreciated!

Catalin is the founder of Mostash – a social marketing boutique – and he’s always happy to share his passion for graphic design & social media.