For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
Each checkbox and radio is wrapped in a for three reasons:
It provides a larger hit areas for checking the control.
It provides a helpful and semantic wrapper to help us replace the default s.
It triggers the state of the automatically, meaning no JavaScript is required.
We hide the default with opacity and use the .custom-control-indicator to build a new custom form indicator in its place. Unfortunately we can’t build a custom one from just the because CSS’s content doesn’t work on that element.
We use the sibling selector (~) for all our states—like :checked—to properly style our custom form indicator. When combined with the .custom-control-description class, we can also style the text for each item based on the ’s state.
In the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.
Streamline your Joomla development with a single, reusable snippet designed for flexibility, consistency, and easy updates.
Used in Joomla Component Builder - Source - Mirror - Download
