Stripe form formatting needs placeholder styling

Affected version
2.1.12

CmptrWz

New member
Stripe input fields can have unreadable placeholder information on dark backgrounds if the ::placeholder pseudo-element isn't given styling in the payment_initiate_stripe template. Without the additional styling the placeholder text comes out as black. This has mainly shown up in an up to date Firefox, Chrome is ignoring Stripe's CSS there.

Specifically, this block:
Code:
			<script type="application/json" class="js-formStyles">
				{
					"base": {
						"color": "{{ parse_less_color(property('textColor', '#141414'))|escape('json') }}",
						"fontFamily": "{{ property('fontFamilyUi')|escape('json') }}",
						"fontSize": "16px",
						"lineHeight": "{{ property('lineHeightDefault')|escape('json') }}"
					},
					"invalid": {
						"color": "#c84448"
					}
				}
			</script>

Needs to be something like this:
Code:
			<script type="application/json" class="js-formStyles">
				{
					"base": {
						"color": "{{ parse_less_color(property('textColor', '#141414'))|escape('json') }}",
						"fontFamily": "{{ property('fontFamilyUi')|escape('json') }}",
						"fontSize": "16px",
						"lineHeight": "{{ property('lineHeightDefault')|escape('json') }}",
						"::placeholder": {
							"color": "{{ parse_less_color(property('textColor', '#141414'))|escape('json') }}"
						}
					},
					"invalid": {
						"color": "#c84448"
					}
				}
			</script>

Though the default color should probably be something to differentiate from normal text, if only by being made partially transparent.
 
Top