Styling Checkbox on Webflow Checkout Page

At a glance

A community member, Greg, is having an issue with a checkbox on the checkout page of a website built in Webflow. The checkbox for "billing address same as shipping" is visible in the designer, but Greg cannot see the "checked" state option to style it, and the checkbox is not functioning on the live site. After spending a significant amount of time trying to resolve the issue, Greg asks the community for assistance.

Another community member, Matt, responds by suggesting that Greg check the custom code section within the site settings for a specific CSS rule that may be causing the issue. The rule includes -webkit-appearance:none;, and Matt advises Greg to delete this line, which should resolve the problem.

Greg expresses gratitude for Matt's help, and a final comment indicates that the issue has been resolved.

Useful resources

GGreg

Hey all. Hoping someone smarter than myself can help with a minor issue but causing a major headache in webflow.

On the checkout page of a site I'm building there is a checkbox for 'billing address same as shipping' I can see it in the designer but, firstly I can't see the 'checked' state option to style it and Secondly, I can't get it to show on the live site - nothing happens when it's clicked.

I've spent an ungodly amount of time trying to fix it and thought it time to ask for help

Appreciate any assistance.
Greg

Read Only Link
https://preview.webflow.com/preview/nad-plus-online-6391706fdd5fc7c1ecf8e10?utm_medium=preview_link&utm_source=designer&utm_content=nad-plus-online-6391706fdd5fc7c1ecf8e10&preview=c5ceaf63dde32f01b5cdc276d0ea3e2c&pageId=67d2ee41e1740f0d5d49fc36&locale=en&workflow=preview

Attachments

5 comments

MMatt Johnson

@Greg would you mind sending the published URL (webflow.io) - need to inspect the CSS directly.

GGreg

https://nad-plus-online-6391706fdd5fc7c1ecf8e10.webflow.io/checkout

MMatt Johnson

@Greg can you check in your custom code section within the site settings for this CSS

* {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -o-font-smoothing: antialiased;
 -webkit-appearance:none;
}

Specifically - delete the -webkit-appearance: none; and everything should work as expected.

GGreg

Matt. You legend 🙌

Many thanks for digging in. Much appreciated.

MMerouane Tech DZ

Perfect

Add a reply

Community forum for knowledge and support

Styling Checkbox on Webflow Checkout Page