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).
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.
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.
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.
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!
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/
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.
)