CNode社区问个css问题【已解决】
发布于 1 年前 作者 DevinXian 1599 次浏览 来自 问答

iOS浏览器input[disabled/readonly],设置颜色效果不符合预期~

input:disabled, input[disabled] {
    -webkit-text-fill-color: #5e5e5e;//这个属性会优先于placeholder的color样式和input color样式,导致两者颜色相同,而我想要两者不同。
    color: #5e5e5e;// safari iphone没作用
    background: #fff;
 }
 input::-webkit-input-placeholder {
    color: #acacac;
}

只有iOS有这个问题,暂时没查到是哪个属性搞的鬼,请大家帮忙!感觉color总是被加上了opacity一样的… 解决方案

  1. 思路:鉴于-webkit-text-fill-color属性优先于color,这里使用它替代color即可
  2. 其实很简单0.0,突然转过弯来的…
  input:disabled, input[disabled] {
	  -webkit-text-fill-color: #5e5e5e;//分别设置
	  color: #5e5e5e;// safari iphone没作用
	  background: #fff;
   }
   input:disabled::-webkit-input-placeholder, input[disabled]::-webkit-input-placeholder {
	  -webkit-text-fill-color: #acacac;
	  color: #5e5e5e;
  }
回到顶部