Style checkbox

Support
#1

Hey there,
I tried to style the checkbox right here, but I could not find the classes I need to style.
please help me to find the classes I need to add my styling to.
Thanks for your help!

#2

Hi There @zerotoone.de

Thanks for writing in! I’m not sure what exact styles that you prefer, however you can target that checkbox using the following way. You just need to add your CSS rule into your X -> Theme Options -> CSS area and add your own CSS styling as well.

.mc4wp-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

Hope that helps.

#3

Thanks for our reply, I’d like to change the look of the checkbox, the arrow, the filling the border radius etc.
I got the styling, all I need are the classes to add it to. like the default and the hover state.
Thanks for your help

#4

Hi @zerotoone.de,

Previous suggestion will help. See this:

Checkbox element doesn’t have an ID or class set. So to target it, we can use it’s parent. On the previous reply, @mldarshana, uses the class added on the form element. Previous CSS mean all checkbox that is child of the form with class mc4wp-form. On the image, you can see I have highlighted the ID of the form and not the class. This is because ID is more specific. In case you want this changes to only work for all checkbox of this form, and not on other checkboxes on other site page, ID is better. So right now, it can be like this:

form#mc4wp-form-1 input[type="checkbox"] {
   /*your styles here*/
}
form#mc4wp-form-1 input[type="checkbox"]:hover {
   /*your styles here for hover*/
}

Hope this helps.

#5

OK I styled everything and it works, however the form does not give out the required notice, although the checkbox is treated as such

Its treated correctly, the form cant be sent without checking, but the required notice does not appear

#6

Hello @zerotoone.de,

I can see you are using Mailchimp for wordpress for the form on homepage. If that third party plugin support the notice and it doesn’t work as intended, please check in with the plugin developer. It is part of the form functionality and cannot be edited using just CSS. Thanks.

#7

is there an alternative that comes with the xtheme?

#8

Hey @zerotoone.de,

You can show the notice when the checkbox is unchecked with custom JS in your current form. Try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.mc4wp-form input[type="submit"]').on('click', function(){
		if(!$('input[name="AGREE_TO_TERMS"]').is(':checked')) {
			$('.mc4wp-response').html('Please confirm you have read the privacy policy ');
		}
	});
});

You can change the text Please confirm you have read the privacy policy as per your need in the above code. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#9

Thank you, Is it possible to get the standard notice instead of the one below the submit button?

#10

Hey @zerotoone.de,

That’s technically possible. However, this is veering into custom development which is outside the scope of our support. We only have given you ideas here to help you get started. We’re sorry if this was not made clear. To continue with third party plugin modifications, please hire a third party developer.

If you wish to work on the development yourself, please consider learning how to use the browser inspector to get the CSS that you need. See https://developers.google.com/web/tools/chrome-devtools/

Thank you for understanding.

#11

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