Support » Plugin: Contact Form by WPForms - Drag & Drop Form Builder for WordPress » Selected radio buttons dots do not appear in Twenty Twenty-One theme

  • Resolved Pablo Massa

    (@pablomassa)


    Hi, I found that with the new default Twenty Twenty-One theme, at least on Chrome and Firefox, the radio buttons do not show the dot when are selected.

    Screen recording: https://imgur.com/a/vRdBorX

    I try the same form in the Twenty Twenty theme and it works fine.

    Hope you can fix it or give me any workaround (I want to use the new theme for the site that I’m building).

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello @pablomassa,

    There might be a theme CSS that is changing the default styling of the radio buttons causing the issue that you are seeing in your forms.

    To confirm it, can you please provide the link to the page where we can see the form so that we can check if and suggest a solution?

    Thank you.

    Thread Starter Pablo Massa

    (@pablomassa)

    Hi Jade, ok, I created this temporary page with the bug https://ver.ladiaria.com.uy/test/

    Let me know when you finish the test please so I can delete it.

    Hello @pablomassa,

    Thanks for providing the link.

    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 from WPBeginner on easy ways to add custom CSS like this to your site.

    I hope this helps.

    Thread Starter Pablo Massa

    (@pablomassa)

    Hi Jade, thanks, I added the code and now works.

    Hope WPForms team consider fix this natively on the plugin, the Twenty Twenty-One theme is the new default theme and is pretty popular (500+K active installs) https://wordpress.org/themes/twentytwentyone/

    Besides me, many persons are experiencing this UX issue.
    Hope can help with the report.

    Thanks for your help.

    Jade

    (@jadeam)

    Hi @pablomassa,

    Definitely! And thanks for bringing this up. This has been reported to our development team so that they can look into it for future release. 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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Selected radio buttons dots do not appear in Twenty Twenty-One theme’ is closed to new replies.