Selecting Form Checkbox Shows Text Instead of Checkmark

[Stephanie_Berr2]

Not sure why this is, but when you select a checkbox on our form, instead of a checkmark, a string of nonsense text appears instead of a checkmark. Sample page: https://go.taxjar.com/2020-WR-ServicePartner-SalesTaxSuccess_LP-01-Request.html

[SanfordWhiteman · Accepted solution]

Someone added that content to your CSS stylesheet, it's not related to the Marketo form itself.

[Stephanie_Berr2]

 Once again @SanfordWhiteman  you save the day! Thank you!

[Stephanie_Berr2]

@SanfordWhiteman Removing that jibberish text from the CSS I'm not able to get a checkbox to appear in the form at all now. Is there something I need to put in that content line of the CSS? https://go.taxjar.com/YYYY-WR-Web-Request_LP.html

[Harish_Gupta6]

Hi,

In the https://go.taxjar.com/rs/806-QBE-674/images/taxjar-lp-flex-styles.css file you have the below code:

form.mktoForm input[type=checkbox] {
-webkit-appearance: none !important;
box-sizing: border-box !important;
}

Please remove the below line from this code:

-webkit-appearance: none !important;

This will resolve the issue.

Thanks

[Stephanie_Berr2]

Thank you @Harish_Gupta6. That did the trick!

[Dave_Roberts]

You might try:

 content:"\2713";

willing to bet this'll do the trick 😉

It looks like this might be the intended CSS character ✔ (check mark) that's getting replaced with all the gibberish. 

Removing the -webkit-appearance:none; will actually activate the browser defaults for the check mark which is a less predictable approach (b/c it's different for every browser) when you're using customized form styles for your inputs.  

[SanfordWhiteman]

Agreed. Also note -webkit-appearance: none; doesn't  apply in iOS Safari nor IE.  Not really the right way to build custom form appearances (which can be mobile-inaccessible and offputting enough already).