Twenty Seventeen: input backgrounds are only styled for webkit browsers

[Clorith]

The styles for inputs are all styled with background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), this means there are situations where you may end up with dark text on dark backgrounds, for example when working with high contrast computer setups.

We need a fallback for non-webkit browsers here, Twenty Sixteen does this by defining background: #f7f7f7

Originally reported by @schamane in ​https://wordpress.org/support/topic/twentyseventeen-input-fields-unreadable-on-reversed-screens/

[Presskopp]

found this in 2015, reason for double color gradient:

/* Removing the inner shadow on iOS inputs */

[schamane]

Replying to Presskopp:

found this in 2015, reason for double color gradient:

/* Removing the inner shadow on iOS inputs */

@Presskopp Thank you for digging this up!

[Presskopp]

Patch imitating Twenty Sixteen, using #fff, not #f7f7f7, because it would be nowhere else to find in Twenty Seventeen.

[davidakennedy]

This is something that definitely should be fixed. I want to note that we'll need to also ensure any color changes also work with the color schemes.

[davidakennedy]

After further discussion with @laurelfulford on this, we’re only using a linear gradient to override Safari’s default styles. The dark scheme already has the necessary color override, so we're good there.

So thanks for the patch @Presskopp! It looks good to go.

[davidakennedy]

In 39388:

Twenty Seventeen: Provide a background color fallback for non-webkit browsers on input styles

This allows the styles to work correctly when modified by high contrast computer setups.

Props presskopp.

Fixes #38939.

[ocean90]

In 39389:

Twenty Seventeen: Provide a background color fallback for non-webkit browsers on input styles

This allows the styles to work correctly when modified by high contrast computer setups.

Merge of [39388] to the 4.7 branch.

Props presskopp.
See #38939.