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.
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:
- <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
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.
- 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.
- 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.
- 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.
- 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.
The script has been tested for compatibility with the following desktop browsers and OS’s:
- IE8+ (but it can also work in older IE versions)
- Windows Phone 8+
- Android 4+
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!