CSS Conflict: Checkboxes invisible in [swpm_login_form] with Kentha Theme

[dariotoby]

Hello,
I’m using the Simple Membership plugin on the ‘Kentha’ WordPress theme.
While the checkboxes (Privacy/T&Cs) are visible correctly on the registration page, the ‘Remember Me’ and ‘Show Password’ checkboxes are completely invisible in the form generated by the [swpm_login_form] shortcode.

I noticed that the theme applies an aggressive reset ( -webkit-appearance: none and -webkit-backface-visibility: hidden ) to all inputs. Despite using custom CSS with !important, the checkboxes don’t appear, although the label is clickable and functional.

Could you tell me if there’s a specific selector or recommended CSS class to force the checkboxes in the login form to revert to their default appearance without being overridden by theme resets?

Local site (XAMPP).
Thanks.

[The Assurer]

Thank you for the detailed explanation—that helps a lot 👍

What you are seeing is almost certainly caused by the theme’s global input reset, not by the Simple Membership plugin itself. The plugin intentionally applies minimal CSS so that forms inherit styling from the active theme. This is mentioned in our support notes as well: the plugin generally lets the theme control styling, which sometimes leads to conflicts when a theme aggressively resets form inputs.

In your case, the Kentha theme rule like this is likely the culprit:

input {
-webkit-appearance: none;
-webkit-backface-visibility: hidden;
}

When appearance: none is applied to input[type=”checkbox”], the browser removes the native checkbox UI, which is why the label still works but the checkbox itself becomes invisible.++

Recommended CSS Fix

Try explicitly restoring the default appearance only for the login form checkboxes generated by the [swpm_login_form] shortcode.

/* Fix invisible checkboxes in SWPM login form */
.swpm-login-form input[type=”checkbox”] {
-webkit-appearance: checkbox !important;
appearance: checkbox !important;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
opacity: 1 !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
}

You can also try a slightly broader selector if the theme overrides deeper:

.swpm-login-form .swpm-remember-me input[type=”checkbox”],
.swpm-login-form .swpm-show-password input[type=”checkbox”] {
-webkit-appearance: checkbox !important;
appearance: checkbox !important;
}

[Author]

Posts