Safari颜色与禁用输入的背景透明度

Question

当我在禁用的输入上使用css颜色＃b3b3b3时它会变成白色？为什么会这样，我该如何解决？

看看这个小提琴： https://jsfiddle.net/esty6t20/

CSS：

.transp {
  background-color: transparent;
}
.bug-color {
  color: #b3b3b3;
}
.red-color {
  color: red;
}

HTML：

禁用灰色斑纹

<input class="transp bug-color" value="test text" disabled>
<br/>
Disabled Red color
<input class="transp red-color" value="test text" disabled>
<br/>
Enabled Bugged Gray
<input class="transp bug-color" value="test text">

我已经尝试强制覆盖！important但没有成功。 检查结果：

Answer 1

这是因为一个奇怪的错误。输入占位符文本一直是一个问题，因为似乎没有一个标准尚未成功实现所有浏览器。因此，在所有浏览器轻松中保持一致是一件痛苦的事。

但是，将.remove属性添加到CSS中它会起作用。它似乎在Chrome中很好，所以添加它会让它在Safari中运行得很好。

您的CSS将是......

-webkit-text-fill-color

MDN documentation关于此属性和CanIUse支持表。

Answer 2

问题本身不是#b3b3b3。如果设置color: #a8a8a8，您会发现文本实际上呈现为#fdfdfd，这意味着Safari对某处的颜色混合计算有误。由于#b3b3b3的亮度甚至更低，因此混合错误会使其显示为纯白色。

Safari将transparent的颜色评估为rgba(0,0,0,0)。如果您改为设置background-color: rgba(255,255,255,0)，则所有浏览器都将正确显示所有内容，而无需-webkit属性。

如果您还需要支持IE11，请确保包含一个后备广告，即：

background-color: transparent;
background-color: rgba(255,255,255,0);

Answer 3

您应该使用禁用的选择器，如下所示：

input.bug-color:disabled {color:#0000ff;}