I wanted style the colors & checked background color but things got a different case.
I styled the input checkbox style, the size got styled but radius, colors etc refused to effect. I also styled the checked state with with pseudo class selector for background & others, but failed.
I’ve tried many ways and all efforts prove abortive. Only the width & height got styled.
PS: Someone posted this on the Facebook group and the problem doesn’t only affect checkbox, it affects radio too.
Since there are currently no radio- or checkbox element specific settings regarding the styling, I wouldn’t consider this as a bug. Also, I can’t find any ideas on the idea board: Idea board – Bricks
Custom CSS is the only solution that can make this work properly. I honestly don’t know whether it has become easier to make the styling uniform across different browsers - but “back then,” it was a pain in the ass.
On your case the label doesn’t show because on your Form you have labels hidden (assuming from not seeing labels on the other fields also)
Although, I agree the label being shown or not should be more granular (i.e. by field) or at the very least for checkboxes/radios we should be able to override global form label settings!
Your example is a good use case for this, specially because there is no CSS way of showing only that label - Bricks doesn’t even print them to avoid more DOM elements than necessary - which for this kind of cases works inversely, requiring the user to add A LOT MORE DOM Elements to have a simple label.
Agree. Please support the creation of nestable checkboxes/radios so that any structure or style can be achieved. This can be done easily by wrapping the input in a label, placing a span next to the input as a nestable element, and then inserting any content (such as icons, text, or images) within that span. This approach opens up many possibilities, allowing for fully customizable checkbox and radio button designs in filters, form elements, and more.
Additionally, default native checkboxes are not fully customizable, and their styling can vary across browsers. This method ensures a consistent cross-browser appearance with the same styling everywhere.
