Forms: Custom placeholder text color is overridden on the frontend

[aaronrobertshaw]

Impacted plugin

Jetpack

Quick summary

Setting a custom placeholder text color on form fields only works in the editor.

Editor	Frontend

Note: The field width, gap spacing etc should be fixed by #41415 and was reported in #41414

It appears that these styles blindly enforce color ::placeholder pseudo elements.

Steps to reproduce

1. Add a contact form to a post
2. Select a field and set a custom field text color
3. Save post and view on the frontend. Note the color is different to the editor

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Minor

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

No response

[aaronrobertshaw]

This might be resolved down the line if we switch to inner blocks for form fields (see #41281).

In the short term though, we could tweak the styles to take into account the fact the custom color is applied on the field wrapper as a custom CSS property e.g. --jetpack--contact-form--text-color.

I don't think we can rely on input[type="..."]:not([style*="color"]) because it would erroneously exclude inputs with just background-color or border-color set.