Safari CSS字体颜色问题

Question

我在Safari浏览器的MacBook、iPhone和iPad上遇到了字体颜色的问题。禁用元素会变成灰色，但我希望它保持原来的黑色颜色。在Firefox和Chrome中结果是正常的。

这是我的CSS代码：

input[disabled], textarea[disabled],
select[disabled='disabled']{
    color: #000000 !important;
}

我也尝试使用颜色名称，但结果相同。 谢谢你的帮助！

- kwan_ah

---

也许你可以尝试将以下代码添加到你的CSS中：yourelement:disabled { color: #000000 } - Frnak

似乎你不是唯一一个遇到这个问题的人。这个问题在其他人中也存在。 - Frankenscarf

-webkit-text-fill-color 与此有关吗？ - Stuart

Answer 1

这是我找到的唯一一个在FF、Chrome、Safari和Safari Mobile上都能正常工作的解决方案。干杯！

input[disabled], textarea[disabled],
select[disabled='disabled']{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
   background: white;
}

- kwan_ah

---

好奇这在FF中是如何工作的，但它帮了我一个大忙，所以+1。 - SpaceBeers

谢谢，看起来 Webkit 似乎会使输入框失效并降低不透明度，我无法弄清为什么将颜色设置为 #000 没有帮助。 - blaedj

-webkit-text-fill-color: rgba(0, 0, 0, 1); -webkit-opacity: 1; //在iPhone上需要 谢谢，它对我有用。 - jbmyid

干得好！这是一个非常奇怪和意想不到的问题，让我浪费了很多时间。你真的帮了我大忙！ - Matthew David Jankowski

谢谢！text-fill-color 对我来说是关键。 - Steve

我在MDN文档中看到一个警告，不要在生产网站中使用webkit-text-fill-property。https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color。 - siva

Answer 2

你可以尝试将其设置为除纯黑色之外的任何颜色，例如#00001或#000002，以解决问题，因为Safari会尝试覆盖它。

input[disabled], textarea[disabled],
select[disabled='disabled']{
    color: #000001 !important;
}

- AO_

---

它在Safari浏览器中给我一个深蓝色而不是黑色。@smftre - kwan_ah

@kwan_ah，这样做没问题，因为它不是#000000 ;) - AO_