问题 1

h5 iPhone input 框disable时的样式问题，该问题只出在iphone上面，安卓上面没有出现这个问题。

背景

做了一个表单，表单需要在某些时候使用有值的input框的disable状态，在安卓上面预览正常，但是 iPhone 显示的时候，默认值的颜色很浅，差不多是比安卓的灰色更浅的颜色，几乎看不见。

解决

:disabled {   
    color: #7C7F81;   
    -webkit-text-fill-color:#7C7F81; 
}
input { 
    opacity: 1; 
}

因为修改后的颜色和正常颜色相比，像是加了遮罩层一样，所以我首先想到的是增加 z-index，不过没有用，随后我又想到设置透明度，同时还需要设置disable的 iphone 的字体颜色，这样才改了这个问题。

问题 2

input disable的时候，设置其color属性不生效。

背景

在做一个表单的时候，表单内的input在某些情况下会要求disable，但是input disable 时，文字的color设置失效，而背景色的属性却依旧可以生效。

解决

除了color,还要加上-webkit-text-fill-color属性，这样改之后字体的颜色就生效了。

input:disabled, input[disabled]{
	color: red;
	-webkit-text-fill-color:red; // ios 和 安卓9.0 必须添加此属性，才会生效
}

学习-webkit-text-fill-color属性

上面两个 bug 其实都和-webkit-text-fill-color这个属性有关，于是我又去查了一下这个属性。

定义

MDN 给的定义是这样的：The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.

翻译过来，也就是说：-webkit-text-fill-color属性指定了文本字符的填充颜色，如果没有设置这个属性，就会用 color 属性的值作为这个属性的值。

那么，我猜测上面2 个bug的出现原因就是：不知为何，-webkit-text-fill-color不是color的值，所以最终渲染出来的元素的文本颜色不是color的颜色，那么就只能手动设定这个属性的颜色了。

兼容性

我看了下，除了 IE，其他浏览器基本都是可以使用这个属性的。但是这个属性不是标准属性。 MDN 上提示说：“不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。”

MDN refer: developer.mozilla.org/en-US/docs/…