[Resolved] CRED required fields are now pink background?

[Author]

Posts

[jeffS-2]

I am trying to:
My CRED forms have been working fine for 3+ years. Suddenly (I noticed about a week ago) the required fields appear with a pink-ish background color. I definitely did not make this change myself. In fact, the Toolset plugins are the only plugins I have recently updated.

Link to a page where the issue can be seen:
hidden link

I expected to see:
A light-gray background, same as non-required fields.

Instead, I got:
A pink/peach background color.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I see it's CSS conflict with your theme. The red color style applied to textbox is from your theme file:

=> themes/views_base/style.css

This is the culprit CSS that is applied from above theme's style.css:

input:invalid, textarea:invalid {
     background-color: #f0dddd; 
}

[jeffS-2]

Sorry, Minesh but...

My Views_Base style.css has not changed since October, 2015. My forms have been working for 3 years and now they suddenly have pink/light red backgrounds for required fields. It seems to me, the most recent update of CRED may be causing this. Also, please notice that CSS classes are input:invalid and textarea:invalid. Those classes should only be applied after the Submit button is pressed. The fields are not invalid unless they do not conform to the propoer format for the Types files, or the required field is empty upon clicking Submit. A pink/red background implies an ERROR. There can be no error in those fields when the form has only just been loaded on the page.

I hope this explanation is clear.

Jeff
------------

[jeffS-2]

Note: I had to force those classes to commented-out for now because I have users complaining about it.

I don't understand why those fields are marked as invalid before any data has been entered into the form. That doesn't make sense.

Jeff
------------

[Minesh]

Ok - Well I pointed out exactly form where is the issue and what is the cause of the issue. Theme CSS conflicts are common and you need to adjust accordingly.

[jeffS-2]

I cannot accept Minesh's reasoning/solution that "Theme CSS conflicts are common and you need to adjust accordingly." I have two CRED forms that had not been changed since October, 2017. Sometime within the past few weeks, the required fields in those two forms suddenly are displayed with a pink (light red?) background. This should only occur AFTER the form is submitted and those fields are either empty or non-conforming. Simply loading the page with the fresh form should not show those fields to be in error; that is very misleading to the user, and several people have recently complained or inquired about this to me. Furhtermore, the classes Minesh refers to are input:invalid and textarea:invalid, both of which are clearly not normal display classes, but rather require the "invalid" state.