Checkmarks not visible on forms

I think the problem may be with the way WPForms deals with Checkboxes … ? This CSS will show the checkmarks (albeit offset) …

div.wpforms-container-full .wpforms-form * {
position: relative;
}

Have you raised a support ticket with WPForms as well?

Oliver

Hello @mariepnwcdr,

I took a look at the form and I believe I see the issue with the checkbox/radio button styling. The WordPress theme is changing the browser’s default appearance for checkbox/radio button inputs and that’s conflicting with WPForms styles.

To address this, we need to make some small CSS tweaks, which I’ve included below:

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

In case it helps, here’s a tutorial on easy ways to add custom CSS like this to your site.

I hope this helps!

Hi @mariepnwcdr,

We haven’t heard back from you in about a week, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!

The CSS worked! Thank you Jade.

This worked for me as well. Before I added the suggested CSS I had default checkboxes and radio buttons that didn’t look good (no color, off center). After adding the CSS, the selected options were shown in a different color and perfectly centered.

hi @jadealombro,

great that your solution has already helped some people to get forms looking good. Unfortunately your ccs tweak didn’t work for me.

Do you have any idea what the problem might be???

https://www.narrenclub-achstein.de/jetzt-mitglied-werden/” rel=”noopener” target=”_blank”>link to form