最近在做项目的时候发现，将input或textarea设置为disabled后，在iphone手机上样式将被覆写。解决方案就是：

1
2
3
4
5
input:disabled, textarea:diabled {
    -webkit-text-fill-color: #000;
    -webkit-opacity: 1;
    color: #000;
}

以上样式将覆盖其系统默认设置的值，能够实现android和ios的兼容性。
其中,-webkit-text-fill-color是用来做填充色使用的，如果有设置这个值，则color属性将不生效。

这个属性也经常用于制作镂空字体等特效。
如:

1
2
3
4
5
6
7
8
9
10
11
<div class="demo">
  hello
</div>

.demo {
  width: 100px;
  height: 100px;
  font-size: 40px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000; /* 外面描线的样式 */
}

最终效果如下：

效果图.png