Are you on the eternal quest of CSS customization trying to find an easy way to customize the background of your WordPress forms checkbox or radio fields?
Perhaps, you’ve attempted to adjust the background, by adding extra CSS classes or importing new CSS libraries. Maybe, you’ve been told that these styles are browser-based, and there is nothing you can do to change it. Well, let me tell you, your life is about to change in a major way!
Introducing the accent-color CSS property
The previously hard-to-access controls for the WordPress forms checkbox and radio lists can now be styled using one CSS property, accent-color. Yes, you read that right. Add the accent-color CSS property to the body of your code and you are ready to rock and roll!
How to add the CSS property to your Checkbox or Radio field
Step 1: Disable Opinionated Styles
Navigate to Ninja Forms > Settings > Opinionated Styles and set it to None.
Let me be clear, I typically do not support the idea of disabling the Opinionated Styles. However, when it comes to this styling hack, it’s definitely worth it. Especially, if you are looking for ways to jazz up your forms.
Our Opinionated Styles setting makes use of specialized CSS classes in case your theme hasn’t taken the care needed for HTML elements. Therefore, if you disable the setting, you are left with the default Checkbox and Radio field styles.
Thereby removing Font Awesome icons from the Checkbox and Radio backgrounds. Therefore, enabling the use of the CSS accent-color property.
Step 2: Install and activate Layout and Styles
Download the Layout and Styles add-on from your Ninja Forms account after purchasing. Upload the add-on by navigating to Plugins > Add New > Upload Plugin > Choose File. Once installed, activate to access all drag-and-drop and styling features.
Step 3: Add the CSS property accent-color property to Layout and Styles
Navigate to Ninja Forms > Styling > Default Field Styles > Element Styles > check Show Advanced CSS Properties, and enter accent-color: red; // or whatever color you want. The world is your oyster.
You did it! However, If you are unable to see the new CSS first make sure your browser cache and cookies are clear. After that, rule out a styling conflict with your theme. By temporarily enabling a default theme like Twenty Twenty-two to see if the styling update appears. If the issue remains, do not hesitate in reaching out to our support team for assistance.
Can I use this CSS property on my production site?
I know what you are thinking, yeah accent-color is the new “shiny” CSS property, but can I really use it on my production site? The equivocal answer is, YES. According to the Mozilla, docs, the following browsers include full support:
- Chrome ( Version 93 ) – The most up-to-date version of Chrome ( as of this writing ) is currently Version 100.0.4896.75
- Edge ( Version 93 )
- Firefox (Version 92 )
- Opera ( Version 79 )
- Safari ( Version 15.4 )
See, Styling your WordPress forms Checkbox and Radio fields is a cinch!
Adding new CSS properties to your WordPress form is a breeze with our Layout and Styles add-on. So what are you waiting for? Our Layout and Styles add-on comes with three different licensing options; single-site for $49, five-site for $72, and twenty-site for $99. With our 14-day money-back guarantee what do you have to lose? Give our Layout and Styles add-on a try and let us know what you think.
Looking for more ways to spruce up your forms? In How to Style your WordPress Forms ( Easy Examples ), we discuss several styling tips that will help turn your ugly duckling into a beautiful swan marvel, all without CSS!
