今天被測試人員提了個bug:蘋果手機瀏覽器(Chrome)打開h5,控件在input:disabled的樣式始終是淺灰色,要求改爲黑色。
測試對比:一、在多個pc瀏覽器上瀏覽input:disabled的樣式時,都是本身修改的黑色,可是在蘋果手機上的瀏覽器Chrome打開就是淺灰色,修改無效。
二、覺得蘋果瀏覽器特殊,在mac電腦上sarfri打開h5,顯示爲修改過的黑色
三、覺得是Chrome的問題,在安卓手機Chrome上嘗試打開,發現顯示正常,爲修改過的黑色。
定位爲蘋果手機的瀏覽器(Chrome)的特殊性。web
後來發現仍是 User Agent 樣式的問題。
iPhone Safari/webview input disabled 的默認樣式:
input:disabled{
opacity: 0.4
}
嗯,開發者工具只能看到這一條。 即使是 reset 爲 opacity : 1 也無效。由於還有一條隱藏的樣式 -webkit-text-fill-color ,因而有效的樣式爲 :瀏覽器
input:disabled{
color:"#353535";
opacity: 1;
-webkit-text-fill-color: "#353535";
}工具
配合使用 -webkit-text-fill-color: "#353535";最終實現了字體顏色的樣式修改。測試