Closed
Description
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
- Add a contact form to a post
- Select a field and set a custom field text color
- 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
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Done 🎉
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
aaronrobertshaw commentedon Jan 30, 2025
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 justbackground-colororborder-colorset.aaronrobertshaw commentedon Mar 6, 2025
It looks like the situation flagged by this issue changed with #41712.
After that PR merged, the field's input now uses an actual
placeholderunless the field block is currently selected. This results in the placeholder using placeholder styles not the field's text color which in turn makes the placeholders consistently styled between the editor and frontend.I'll close this issue as completed by #41712.
Note in the above editor screenshot the name field is selected thus showing the field text color. The name and email fields share synced styles so the email field demonstrates the new styling/use of placeholders in the editor.