How can I change the checkbox color? I've already tried everything

Need help
1

Hey.
image

Have any of you managed to change the checkbox color??
I haven’t found a discussion that provided an answer to this problem.

Thank you.

2

Option 1: Custom CSS

Insert the Following CSS in an HTML Element:
set the following ID “myCheckbox” on the Checkbox

/* Default (unchecked) checkbox style */ #myCheckbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid red; /* Red border */ background-color: white; /* White background */ border-radius: 4px; cursor: pointer; display: inline-block; position: relative; } /* When checkbox is checked */ #myCheckbox input[type="checkbox"]:checked { background-color: red !important; /* Red background when checked */ border: 2px solid red !important; /* Ensure border stays red */ }

Option 2: Create a Custom Checkbox with icons

1 Like
3

Hey :wave: @heyykoda

Welcome to the Bubble Community! :tada: :confetti_ball:

I tend to avoid the checkbox element and use the button element instead. You can choose to add an icon easily in the button now with the choices at the top. Choose the ‘square’ as an icon, and the on the conditional tab choose the ‘check’ inside the box and then you have a custom checkbox without using code. :blush: Hope that helps.

2 Likes
4

Thank you, it worked!

5

Good idea! I’ll do that in the future

1 Like
6

@heyykoda

A simple solution here:

7

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