Can’t resize/style checkboxes

I know that this has been asked before. I just need to point it out again that it is very frustrating that you cannot style checkboxes in Webflow. How are you supposed to have a consistent design without the proper checkboxes in a form which - from a design point of view - has to fit into the overall picture/design concept.

As a result of this (tiny) missing feature, I will not host a web project on Webflow and simply go with Wordpress.

Sorry, for my rant but, I have spent way too much time looking through the forum finding a solution for a simple thing like checkboxes…

It’s not only about Webflow. Checkboxes have been impossible or hard to style with CSS. It’s always been hacks and JS.

Follow the links of the answers here and you may be able to craft a custom CSS code to style your checkboxes. Have to read that too.

3 Likes

With Webflow only, you can hack the checkbox and make it look like you want. By overlaying or using a background image, and hiding the checkbox, you can catch a click on anything you want and register it as a checkbox state. Sorry I lack of a demo here, I never took time to try it, but it’s possible, some webflow users use this.

Thank you for your feedback. Yes, I came across various workarounds… However, Webflow primarily targets designers and custom coding is not something which I am really aiming at. What at least should be possible is to increase the size of the checkboxes by adjusting the font-size of those checkboxes, but even this only works to some extent (20px?).

2 Likes

Here I just styled a checkbox by styling the label, using cstom code. Result : http://candyshop.webflow.io/contact

I used a technique from this page : Creating Custom Form Checkboxes and Radio Buttons with Just CSS! | InsertHTML

The code needed is only this : (and class .regular-checkbox on the checkbox element itself)

<style>

label {
	display: inline;
}

.regular-checkbox {
	display: none;
}

.regular-checkbox + label {
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked + label:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;

</style>
3 Likes

The code works great. The only problem I am having is that the label is becoming a checkbox button as well (see attachment). Do I just need to remove the “+ label” in the code to get this fixed?

04%20PM

No, you need to let the label blank, and add a text element manually, close to the checkbox, that you’ll style to your taste.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.