1

I'm testing cross compatibility between Safari and Chrome on both desktop and mobile. I've set something relatively simple for font color.

/* JS inline style...something along the lines of this */
const style = {
    color: 'black',
    WebkitTextFillColor: 'black',
}

<input style={style} value={1}/>

The text shows up black for desktop Chrome and Safari. It shows up as gray on mobile Chrome and Safari though. What's up with that?

patrickhuang94
  • 2,085
  • 5
  • 36
  • 58

1 Answers1

1

I came accross something similar and this is what worked for me:

input{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
   background: white;
}

I think it has something to do with WebkitTextFillColor.

See this issue, too.

Community
  • 1
  • 1
jrn
  • 2,640
  • 4
  • 29
  • 51