• Our dearest friends, we sincerely wish you have the most exciting holidays! We are confident that the year 2018 wil… twitter.com/i/web/status/9…



JavaScript Custom Forms


The modern Web is full of various designs – everything from sophisticated web apps with lots of details and forms, to simple sites with childish layouts. Sure thing, the overall design and site purpose dictate the look and feel for each site element, such as links, buttons, pop-ups, form elements, etc.

Unfortunately, not all webpage elements are easily customized for cross-browser styling with CSS. Text input fields are usually very easy to customize, but styling checkboxes, radio buttons, scrollbars and such may turn out to be a real challenge.

Some people believe form element customization is a bad idea. If interface elements are consistent and match the style of your operating system, you will always recognize them and know how they work. In some cases, though, default styling is like going back to ’90s. See what I mean:

We tried several solutions to combat this customization challenge. Some of them didn’t support the keyboard handling or focus state. Others worked fine, but lacked some customization flexibility or didn’t support mobile devices. The major problem, however, was that all those scripts worked independently and couldn’t be combined into a universal tool that would allow styling of all form elements.

Until now.

Meet JCF (a.k.a. JavaScript Custom Forms) – a unique solution for easy form element customization.


JCF not only supports styling of typical form elements, such as <select>, <input type=”checkbox”>, <input type=”radio”>, but also provides cross-browser compatibility for popular input fields like <input type=”number”> and <input type=”range”>:


Main Script Features

– Styling support for the following form elements:

  • <select>
  • <input type=”checkbox”>
  • <input type=”radio”>
  • <input type=”file”>
  • <input type=”number”>
  • <input type=”range”>
  • As well as scrollbar customization
  • Support for additional HTML5 attributes, such as datalist.

– JCF can set the behavior of custom elements (for instance, you can now specify what dropdown can be used in <select>: browser native or a custom one; whether you’ll use custom scrollbars in blocks with overflow:auto, inside <textarea> or in the dropdown menu, etc.)

– Enhancement of standard form element capabilities (for example, support for vertical <input type=”range”>, image display in <option> tag, cross-browser styling for each <option>).

– Full support for all keyboard event handling.

Modularity and a single core for all components allow easy-to-use script and the ability to avoid excessive files.

How To Style Form Elements

At the moment (early 2015), there are two ways to do form element customization: either CSS or JavaScript. Each approach has its own pros and cons; you should take them into account before styling your elements.


If you need to customize the most 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.

This approach, however, sets the following limitations:

  • Limited browser support (all modern browsers and IE9+)
  • You cannot style the form element itself. To do this, you have to create blank <span> and apply styles to it. This makes your HTML code bloated by adding excessive elements.
  • This approach is not applicable in those cases when you cannot change the HTML structure of your form (for example, when the form is generated by some third-party service).
  • Styling of <select> using CSS only works in a limited manner in IE9-10 (the Select button remains unclickable and should be non-transparent to cover the original select arrow).
  • No cross-browser styling for other elements (such as scrollbars).

Despite these disadvantages, the CSS3 approach has certain benefits:

  • It’s simple. You don’t need to use any other technologies except HTML/CSS. All you need to do is write several lines in CSS and amend HTML structure.
  • Correct performance when JavaScript is disabled.
  • Built-in browser support. Custom elements will always correspond to an actual state of real form elements and have the same behavior as the real ones.


JavaScript provides many more features for form styling and doesn’t have the limitations of the CSS approach. As a bonus, it also supports older browser versions. Usually, form customization scripts hide the original element and create a “fake” HTML structure that emulates the behavior of a real element. Such structure can be customized using standard CSS rules. Let’s take a closer look at the advantages of using JavaScript for form element customization:

  • Support for any browser versions that work with JavaScript (full support for modern browsers or partial support for outdated ones).
  • No need to create empty elements or wrappers in HTML, since JavaScript can do it automatically.
  • You can style any form elements, including scrollbars.
  • Deep form element customization (for example, you can change the way your select function looks, but you can also customize dropdown lists by adding effects to a dropdown menu or a custom scrollbar).
  • You can add visual cross-browser support for new HTML5 input types.

JavaScript also has certain limitations, but most people decide they can live with them:

  • Styling won’t work without JavaScript. The functionality itself won’t disappear, however. If JavaScript is disabled, original form elements will be still available.
  • If the state of a form element was changed by any third-party script and not by the user, you have to additionally update the state of the corresponding fake element.
  • In some cases, JavaScript can’t emulate the native behavior of form elements and their reaction to keyboard and mouse events.

Therefore, you’ll have to use JavaScript until browsers start supporting flexible styling of all form elements. You need a script that will undertake all routine tasks to emulate the behavior of form elements and will give you an opportunity to easily customize components by means of regular CSS.


We’ve come up with a combined approach: 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).

Unfortunately, JavaScript cannot completely control the behavior of native form elements in browsers, which is why we have to use various workarounds:

  • Hide form elements and avoid display:none so that all elements are focusable and keyboard events are handled properly.
  • Display original element with opacity:0 over the fake one so the standard window for choosing files and drag-and-drop files on <input type=”file”> works well.

Check out our Demo Page to see all styling capabilities of our script and how it works with various form elements.

Browser Support

The script has been tested for compatibility with the following desktop browsers and OS’s:

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


JCF is a flexible solution for form element customization. It supports many form elements and works not only on desktop, but on mobile devices, as well.

The script is provided under the MIT license and uses jQuery.

You can download the latest script version here.

Check out more detailed documentation on GitHub on how to use and adjust this script.

We hope our tool will speed up your work and help you with the development of your websites!



About the Author: Sergey is a devoted and forward-thinking web developer. With over 6 years of experience and counting, he loves solving non-standard tasks and playing around with JavaScript techniques.


  1. Israel Tiomno Apr 17, 2015

    Great job Sergey!

    One question: Is it possible to apply the jcf to certain group of controls? Adding the class ‘jcf-ignore’ is a good solution, but what about when you have a WP plugin populating HTML content and you don’t want jcf applied to that content?

    Thank you very much!

  2. Israel Tiomno Apr 17, 2015

    I’ve just realise that there is a method for my needs: replace: function(elements, moduleName, customOptions)
    Sorry for the silly question before.
    Thank you again!

  3. Sergey Miroshnik Apr 17, 2015

    Dear Israel,

    I see you have already hunted down a question!
    If any more appear you are welcome to post them here)

  4. dharmendar Jul 29, 2015

    Hi, we used JCF plugin for select dropdown control. But we are facing an issue with this plugin. whenever user select an item in the dropdown, our page should invoke OnSelectedIndexChanged event. This JCF plugin does work when user select the item with the mouse click, but it is not working when user select item and pressed “ENTER” button on keyboard. Please advise

  5. PSD2HTML Team Jul 30, 2015


    Thanks for the question and could you, please, provide some more info on the issue? We do not quite understand what you mean by OnSelectedIndexChanged event. JCF does not have such an event, it was never supposed to.
    When we test it on our side JCF reacts well on both mouse click and Enter key. Could you, please, let us know more background on the issue?

  6. dharmendar Jul 30, 2015

    in ASP.Net, dropdown has an event called SelectedIndexChanged which will be raised when the selection from the dropdown changes between posts to the server. So issue is, when user changes the dropdown selection using mouse “click” it is working fine but not with the “Enter” key.

  7. PSD2HTML Team Aug 03, 2015

    Are you using native select dropdown or customized one? If you’re using native dropdown the select behaves exactly like native. If you’re using custom dropdown, then the onChange event should occur every time you hit the cursor key. Thanks!

  8. dharmendar Aug 03, 2015

    Yes, we are using asp.net custom dropdown. For this dropdown, onchange event occuring on every cursor key in IE and Google Chrome. And in firefox this event is only working with mouse click. But my main requirement is, this event should not trigger with cursor keys. OnChange event should only trigger on “Enter Key” or “Mouse Click” on all browsers. Please advise.

  9. PSD2HTML Team Aug 04, 2015

    This behavior depends on the OS and browsers. For example, if you hit ‘up’ and ‘down’ arrows using your keyboard in Windows, this event can fire multiple times not opening options dropdown. In Mac OS X, things are different. It opens the dropdown and the change event fires only after a menu item is selected.
    If this behavior is important for your project, it would be better to use the native select dropdown. We’ll expand the custom dropdown features with a Windows-like select behavior in our next release.

leave a comment

All posts Back to top