▼
Streaming live at 10am (PST)

How to change the default background color for checkboxes

Design help Custom code
#1

Hello!

For a form, I would like to change the hover and background color used on checkboxes. Where does one click in the Designer to do this? What’s the sequence of steps?

I do know how to do a custom checkbox. But I don’t want to have to set every checkbox to custom. (And it breaks my existing javascript by creating new class names).

image

I have tried adding custom code to project settings. While I can successfully add a border on checked, I haven’t figured out how to change the background color, even when adding !important.

input[type=“checkbox”]:checked {
box-shadow: 0 0 0 3px #e05f37;
}

Have tried
background-color: #ff0000 !important;
color: #ff0000 !important;
but neither seem to do anything.

Any suggestions on how to change the default color for checkboxes?

Thank you!
CB

#2

Hi @ColleenBrady :wave:

The way I generally do this is without custom code.
Style the checkbox how you want it to appear across the site, and make it a symbol.

When you want to re-use it, you can drag a new instance out each time, which will have all your default settings. Then you’ll just need to CMD + SHIFT + A to disconect from a symbol, as you can’t rename it without it renaming all instances.

Here’s a quick video explaining it (no sound)

Hope this helps.

1 Like
#3

Hi @magicmark.

Thank you for the video and tips.

I think I am still missing something – I do not see a “checked” state as shown in your video.

Webflow-Checkbox
Webflow-Checkbox1411×1342 110 KB

#4

@magicmark -

After taking the screenshot, I repeated my steps while recording a video.

I used the generic form element and added a checkbox. To the checkbox, I added a custom style that I had created earlier (note: no styling actually applied to the class, but noticed that it looked like you had created a class from what I saw in your video.)

Where do I click or what should I do to see “focused” in the drop-down at 46 seconds into your video?

Seems like I am missing a basic concept and I’m not sure what that concept is.

Thank you!

#6

As soon as you drag the checkbox into the form, the settings pop up. Note the Default and Custom options in the checkbox settings.

Enable “Custom” and you will have access to those properties.

#7

Here’s our Webflow link which should help too.
Please let me know if that helps or if you’re still stuck. Appreciate it’s frustrating when getting these things working!

#8

Thanks @magicmark.

I was really hoping to be able to modify default checkbox. Is that not possible?

#9

You can add custom code to change the exact default one, the Custom field was added for this reason though to save you having to do so.

What’s the reason for wanting to style the default one explicitly? (I’m not a form expert by any means, hence why I’m asking. :grinning:)

#10

Thanks for continuing to help and answer questions @magicmark.

Can you clarify what you mean by custom code? Something beyond additional CSS in project settings?? I’ve managed via CSS to add a border, but even with !important, unable to change the background color.

Here’s a code snippet I’ve used to get a border around checkboxes:
input[type=“checkbox”]:checked {
box-shadow: 0 0 0 3px #e05f37;
}

I want to style the default so that the color matches the site’s overall color scheme. (Or is there something that I am missing entirely with styling and going up the wrong tree?) With all the power that Webflow offers, seems odd to me that I would need to change each checkbox to custom to impact styling.

Another reason I would prefer to update the default style: I have some javascript that is looking at the CSS. With custom styles, my javascript breaks and I’m having trouble figuring out how to fix it.

I did try using some samples from this documentation, but it also didn’t help me (but could be user error on my part): http://css-checkboxes.webflow.io/

Thanks again for looking at this thread!

#12

Hi @ColleenBrady

Here’s a Loom video with sound, I hope this helps explain things a little better, but please ask more if you need to.

Post the javascript here so I may be able to help you get it working without breaking things, or share your project link with me via DM if you need to.

#13

Thank you @magicmark. I’m going to sit down in a few hours and work on this again.

#14

@magicmark - Update: Thanks for your help and support. Almost have a solution I can work with reliably. Will share an update soon.

Happy New Year!!

1 Like
#15

@magicmark - Thank you for all your help and support.

I’m now looking at symbols in new ways. Thanks for mentioning it to me twice! I needed that.

Checkboxes are styled. Maintaining is much easier than what I had been doing. And I have it tied to one of F’insweets Hacks. Pretty happy all around.

Thank you!

1 Like