Check box sizing

Is there still no way to make Bubble’s checkboxes larger? I see some older posts that say you cannot resize them, but I am hoping that has changed.

I have a lot of logic/conditionals tied to my exiting checkboxes so I am reluctant to change them for icons as some suggest. Thanks!

1 Like

I actually think there are a couple of ways to achieve this.

The easiest would be to set the opacity of the input to 0 via css (this rule will change every checkbox on the page):


input[type="checkbox"] {
    opacity: 0 !important;
}

Then you could wrap each one in an align to parent group and add a custom shape that conditionally changes colour based on the checkbox’s state. This would give you a fully customisable checkbox.

Another option would be to simply scale up the checkbox with a very similar css rule :

input[type="checkbox"] {
    transform: scale(1.2) !important;
}

You may not need the important tags, but bubble can be a bit annoying without sometimes.

Thanks for this thoughtful response! I am brand new to no-code. Where do I enter the CSS code you graciously wrote out? When I click on the checkbox I only see “Label” screen shot attached. Thanks!

Welcome to bubble!

If you click on the actual page in the element tree, there’s a section called “html header” on the modal that pops up, in which you can enter custom code.

Bear in mind that everything I wrote will need to be wrapped in style tags:

code here

Thanks! Was the “code here” meant to link to something? THanks again!

Ah! It would seem html tags are automatically removed here. Was merely illustrating the format:

<style> 

input[type="checkbox"] {
    opacity: 0 !important;
}

</style>

And it will go here:
image

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.