Contact Form 7 breaks CSS form input styling

If I use my html form code the form displays exactly as it should. As soon as I install Contact form 7 or any other contact form plugin for that matter and try to 'convert' the form, the styling for the checkboxes and drop down menus breaks. Is this normal behavior? And if so, what is the best way to troubleshoot it? I have looked at google chrome console and it wraps everything in a bunch of new classes. I am not sure if that is the reason for my problem but it doesn't seem like there is a way around that.
Black SulfurAsked:
Who is Participating?
Julian HansenConnect With a Mentor Commented:
It will break when a style introduced overrides the default style on your page.

The first step is to identify where the clash happens - you do this by doing an inspect element (right click target element and select Inspect Element from context menu).
You will see in the style window the dominant style - your overridden style will also be visible but with its style text in strike through.

To override styles you need to make sure
a) Your override style comes AFTER the dominant style
b) That the path in your style includes the same path in the dominant style

If you cannot include your style after the dominant style OR your override is not working you can add the !important to your style to make it the dominant style.

NB: The use of important should be done sparingly as it can lead to unwanted side effects.

If you have a link to a demo page that we can look at that will help us with context.
Black SulfurAuthor Commented:
Hi Julian, sorry it is only on my localhost otherwise I would post a link here.

However, after much pain and suffering I got it close to how I want via CSS! Wow, didn't realize something so simple could be so complicated.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.