发现问题:

<Input value="hello world" disabled />

样式:

1
2
3
4
const Input = styled.input`
border: 1px red solid;
color: black;
`;

Chrome浏览器效果:

Safari浏览器效果:

safari浏览器出现了问题,好像是自身浏览器给input[disabled]加上了opacity样式,尝试在改变opacity得到Chrome浏览器呈现的效果,去掉safari中opacity淡化的样式。

解决方案样式修改:

1
2
3
4
5
6
7
8
9
const Input = styled.input`
border: 1px red solid;
color: black;
:disabled {
color: black;
opacity: 1;
-webkit-text-fill-color: black;
}
`;