Change colour of checkbox

Question. Am I able to change the colour of the Bubble default checkbox? e.g. the blue part in the screenshot below? Thanks :slight_smile:

Screen Shot 2020-11-09 at 2.50.36 pm

1 Like

Don’t believe that this is a built-in function in Bubble, but you can apply some CSS to your checkboxes

Hi, has someone found a way to change the blue color for the checkbox remember me on the login popup?

Hi there @juanvelasquez.c,

Welcome to the Bubble community!

You can do that using some CSS: html - How to style a checkbox using CSS - Stack Overflow

Make sure to expose the ID attribute.

Hi Johnny, thank you but I don’t know how to identify the checkbox background when it is checked to change the background color. I know some CSS and I know how to expose and define the element ID. Do you know how to specifically change that particular checkbox on the default login popup? thank you

Yes, you need to expose the ID, set it to something, then use the HTML element to change it

Have you done it before? what I’m reading from stackoverflow is that if it is a default browser checkbox is not possible to style and I’d have to hide it and create a new checkbox and style it.

I haven’t, but i thought it might be worth a try

In my app I use Icons and states/conditions to know if they are checked or not, it works very well and it adds a beautiful design

You are unable to override the default styling for an HTML checkbox.

Thankfully though, with some basic HTML and CSS, you can create your only fully customized checkbox.

Let me know if you would like a code example.


For Bubble help, reach out via Bubble Coaching | New Horizon Code for your free 30-minute coaching session.

Happy bubble’n

I would very much appreciate a code example, this is a bit out of my league