Styling checkbox

Design help General
1

Hey guys,

I am enjoying using webflow for creating my website, this makes life easy and also improves the process.

I am facing issue with styling the checkbox that we add in forms. The default checkbox doesn’t go well with our graphical theme. So I need to change the color, border, background etc for the check box. But when I do it in webflow I don’t see any effect on the checkbox in the site.

Please help me. Thanks a lot for your time and effort.

1 Like
2

HI @Bala, At the moment, you can style the Checkbox Field, the Checkbox Title but for the actual checkbox (the small square checkbox) certain styles do not affect that, such as background color and text color and border (as an example). So you should plan to use the default checkbox style (although, you can affect the size of that checkbox, using the font size property).

1 Like
3

thanks a lot for your prompt response. Think that must be in your feature list… I felt it is important to style it to match to the theme in other parts of the website.

Thanks,
Bala

2 Likes
4

I styled mine with custom images - check out my public link and go to the bottom project planner section - the 6 options at the bottom are styled check boxes

https://webflow.com/design/overtongraphics?preview=4267affed08145f6daf9539b1a4a8833

Cheers

Josh

4 Likes
5

Overton thanks for sharing how you created that! It’s going to help me a lot. I dig your design style.

2 Likes
6

No worries Danny.

Glad I could help.

Thanks! Very much appreciated :blush:

1 Like
7

So this may be an involved answer, but I was attempting to reverse engineer how you did the stylized checkboxes in your design and couldn’t quite figure it out. I’m attempting to recreate this design here and wanted to use my own custom PNG’s for the checkbox on / off states. What would be a good resource to teach myself to do that?

1142×221 21.4 KB

1 Like
8

Hi,

Apologies, have been away on a work trip and now on vacation for a week.

I’ll get back to you as soon as i’m back to work.

Sorry for the delay.

Thanks

1 Like
9

That styling rocks… share your wisdom! :slight_smile:

10

There is one thing i dont understand: how do you get rid of the standard checkbox-icon in het form? It seems i can’t delete it

11

Hi Josh,

For some reason i am unable to preview this link seems to be broken.

I am also wondering on how i may be able to style the check box im looking to go for this style (image attached)

12

Hey gang,

Any solutions to this one? Or a solution to how to style a dropdown field in the form? I’m just trying to change the background of the dropdown field to match it to the text field above. Like in the image below:

Any help would be kewl!

Thanks
Vako

13

Hey! Thanks for sharing this! Unfortunately your site is down and I would love to learn how you did it. Do you still have a link you could share?

Thanks!

Placeholder text for fields not showing in IE or Mobile
14

ah sorry, yes thats a super old version of my site. i’ve reactivated it for you

https://preview.webflow.com/preview/overtongraphics?preview=dd4d02d6f66868b20b1cb1375ac21cd6

also heres my new site too which has more complex checkboxes with images etc

https://preview.webflow.com/preview/joshoverton?preview=5ba588505170a261989cf69d8eefbb22

Cheers!

2 Likes