CSS class requires use of Important

If you are using the Flatsome theme, too, as the original poster, then complain to the theme developers, not to the developer of CF7. Contact Form 7 is not responsible for the CSS selectors people are using for their forms and updates can always break something, so they should be tested before being deployed to production environments.

Hello there! Thank you for your prompt response. I’d like to bring to your attention that this issue is not limited to websites using the Flatsome theme; it also occurs on websites utilizing the Avada theme.

Additionally, I would like to note that the plugin was working seamlessly with our websites until about two months ago when this issue started occurring, likely due to a CF7 update.

• This reply was modified 1 year, 3 months ago by webartist00.

This might well have stopped because of a CF7 update. However, CF7 doesn’t make use of any CSS and doesn’t force anyone to use any specific CSS selectors. That means, if you used ID selectors in good faith before, that happened at your own discretion. You could have used different selectors before and it wouldn’t have caused any issues. And the developer also doesn’t know which CSS people are using, so you can’t blame him to not have announced this change properly.

Anyway, I don’t see any bad coding practices, this is just the usual risk of changes breaking things.

Thank you for your input. I understand that the use of ‘!important’ with ‘class’ might have been necessitated by a CF7 update.

However, I’m curious to know why ‘class’ only works with ‘!important’ in this context. Occurs this issue generally? Do you have to use ‘!important’ in combination with class as well?

As you mentioned, CF7 doesn’t enforce specific CSS selectors, and developers have the flexibility to choose different selectors. Could you provide more insights into why ‘class’ requires ‘!important’ now, and if there are any recommended alternatives or adjustments?

I appreciate your assistance!

• This reply was modified 1 year, 3 months ago by webartist00.

As I mentioned in the thread you referenced, the problem is CSS specificity. I suppose something in the Avada theme is setting general form control styles whose selectors have a higher specificity than a simple class selector. If you provide a link to your site we can analyze this further.

The solution to avoid !important is to use a selector with higher specificity. The ID selector has a higher specificity than an attribute selector (and a class selector) but that doesn’t mean you’re limited to the ID of the specific element, you could as well use an ID of an ancestor, such as #content .my-class. Other selectors might also have a higher specificity but it’s only speculation without knowing your specific circumstances.

We are not using flatstorm theme. This is an issue related to CF7 not properly recognizing CSS elements as @webartist00?has stated.

We’ve tested this in a dev stage with various themes and the update on CF7 is the issue. Unless you use a workaround the fields will simply recognize basic style.