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"> 

我已經試圖強行覆蓋重要的，但沒有成功。 檢查結果：

Answer 1

這是因爲一個奇怪的bug。輸入佔位符文本一直是個問題，因爲沒有任何一個標準，所有的瀏覽器都已經成功地實現了。因此，讓所有瀏覽器保持一致是一件很痛苦的事情容易。

但是，將-webkit-text-fill-color屬性添加到您的CSS，它會工作。 Chrome瀏覽器似乎沒問題，所以添加這個功能也可以在Safari中很好地工作。

你的CSS會...

.bug-color { 
    color: #b3b3b3; 
    -webkit-text-fill-color: #b3b3b3; 
} 

MDN documentation有關該屬性和CanIUse支持表。

Answer 2

您應該使用禁用的選擇，這樣的事情：

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