Safari 下 input disabled 颜色变浅的解决办法

首先说下原因，这是因为各个浏览器对于禁用状态的表单元素的默认样式没有一个统一的标准，需要开发者去重写。

可以使用以下代码覆盖：

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

以上代码虽然可以解决禁用状态的input的颜色，但同时也会导致placeholder的颜色被覆盖。

这个时候可以使用 :placeholder-shown 选择器，光名称就能看出该选择器的用途。没错，就是可以区分输入框内有无内容的状态。所以我们只需在输入框有内容的时候修改input的颜色即可。

input:not(:placeholder-shown) {
  opacity: 1; 
  -webkit-text-fill-color: #000;
}

完整例子前往 DEMO