Change colour of checkbox

will_ericksson · 2020-11-09T03:55:44.565Z

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

Screen Shot 2020-11-09 at 2.50.36 pm

Screen Shot 2020-11-09 at 2.54.15 pm1554×718 57.1 KB

johnny · 2020-11-09T05:21:46.158Z

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

juanvelasquez.c · 2022-03-31T18:32:11.149Z

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

johnny · 2022-03-31T18:33:35.432Z

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.

juanvelasquez.c · 2022-03-31T18:47:38.886Z

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

johnny · 2022-03-31T18:51:17.214Z

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

juanvelasquez.c · 2022-03-31T18:53:40.544Z

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.

johnny · 2022-03-31T18:54:17.948Z

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

ri_scc_94 · 2022-03-31T20:12:23.826Z

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

newhorizoncode · 2022-04-01T03:47:51.300Z

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

IljaIljitsj · 2022-06-05T14:57:58.272Z

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

guildfordenterprises · 2025-03-31T23:11:44.392Z

Got it working!

Add a html element to your page:

image183×105 2.12 KB

Add this code to the html element (change the color code to suit):

image216×279 6.65 KB

<style>

input[type="checkbox"] {
accent-color: #47978c;
}

</style>

You don’t need to link an id attribute:

image377×759 29.7 KB