Fixed Stripe form formatting needs placeholder styling

C

CmptrWz

Member
Affected version
2.1.12
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.
 
Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.6).

Change log:
Add some input placeholder styling to the stripe payment form.
Click to expand...
There may be a delay before changes are rolled out to the XenForo Community.
 
Back
Top Bottom