same css text color shows different color in safari compared to other

Question

I'm trying to implement a simple color attribute in CSS and it works fine in mobile Google Chrome (Galaxy S10), but not in Mobile Safari (iPhone X):

input[type="text"], input[type="password"], textarea, select {
    color: #777;
}

Utilizing this color displays a nice dark grey on all browsers but Safari. Safari turns this into an unreadable white color. I've checked the CSS and it's pulling the same color, so I'm not sure why the colors are displaying different. I've tried using a fully qualified color #777777 and color: black to see if it makes a difference, but no luck. Below is a screenshot of what it looks like on Safari (iPhone X) and Chrome (Galaxy S10).

Answer 1

I ran into the same thing, and while a lot of the similar questions are dealing with disabled input text color, for me it's just happening in my button's normal state.

I recommend reading this https://stackoverflow.com/a/43483479/4530520 for more info and taking their suggestion of setting the -webkit-text-fill-color property.