When it comes to designing websites, pretty much everything is customizable. Virtually every aspect of a site can be tweaked, styled, and adjusted to reflect the look or brand to a tee.
However, there’s one aspect of website design that really is the exception to the rule – those small elements, such as radio-buttons, checkboxes, and scrollbars. These web page elements are extremely challenging to customize for cross-browser styling with CSS and, as a result, many designers tend to simply rely on the default options.
There is a way that you can fully customize your form elements without experiencing any of the conventional drawbacks; but first, here’s an outline of the most well-known ways.
If you want to customize standard form elements, such as
checkbox, and you don’t want to adjust the select dropdown menu of your
However, it’s completely HTML dependent, meaning that if the form is generated by a third-party service, you may not be able to change it. You also can’t style the form element itself, which results in excessive, bloated HTML. Lastly, CSS can be limiting. The styling of
select only works in a limited format in IE9-10 and you won’t be able to do cross-browser styling for any elements, such as scrollbars.
What Do You Do?
While both of these options offer some level of form element customization potential, neither is without flaws, which can prove frustrating. This is precisely why PSD2HTML® started work on creating a practical solution.
JCF is fully compatible with Chrome, Firefox, Safari, IE8+ (and previous IE versions), Windows Phone 8+, Android 4+, and iOS7+, and supports the following form elements (along with scrollbar customization):
&lt;!-- Dropdown --&gt; &lt;select&gt;&lt;/select&gt; &lt;!-- Inputs--&gt; &lt;input type=&quot;checkbox&quot;&gt; &lt;input type=&quot;radio&quot;&gt; &lt;input type=&quot;file&quot;&gt; &lt;input type=&quot;number&quot;&gt; &lt;input type=&quot;range&quot;&gt;
Select enables you to easily adjust the appearance of the select area and dropdown menus. Using keyboard navigation, custom scrollbars, and image support, it’s simple to create a dropdown menu that looks exactly how you want it to.
2. Range & Number Inputs
JCF lets you add customized horizontal and vertical range sliders and number input forms using only a few lines of code.
3. Checkboxes & Radio-buttons
JCF is designed to handle both focused and pressed states, which makes styling radio-buttons and checkboxes very straightforward.
4. File Input
All semantic and behavioral qualities are completely supported, so you can easily customize all your file input forms. JCF also makes sure that they’re completely compatible across all the popular browsers.
You can tailor the vertical and horizontal scrollbars to work with your user interface design and, if you want to use nested scrollbars, you can! These can also be applied on a texterea.
The Benefits of JCF
- Cross-browser compatibility. This is a real advantage, especially given how many people view sites via a mobile device, not to mention the importance Google has recently placed on mobile-friendly sites.
- Greater flexibility. CSS is obviously fine for basic customization, but if you want to fine-tune your form elements to a far greater degree, it’s not ideal. JCF is far more flexible and offers greater scope for creative customization.
- Simplicity. You can style any form elements you need with a just few lines of code.
- Accessibility. JCF unobtrusively supports keyboard navigation.
JCF is completely free to use and it is released under the MIT license. To get started with it, simply visit this page, or, for more detailed information on how to use it, you can read the documentation on GitHub.
This isn’t a sponsored post, it’s just a plugin I think is pretty useful to us web designers. Styling forms cross-browser, not to mention cross-OS, is a serious pain point in the building process. Luckily for us, this plugin aims to solve that.
I’d love to hear your thoughts on the plugin in the comments!