iPad/iPhone默认input按钮的disabled CSS样式不工作


发布者 kris  发布时间 1456196545116
关键字 JS学习  前端 
最近碰到一个问题,需要复写iPad/iPhone上面的disabled元素的样式,如下图所示



图片来源:stackoverflow 


尝试了这些CSS,一直无法成功:

.ipad input[disabled],
.ipad input:disabled,
.ipad input[disabled="disabled"] {
   color: #000 !important; 
   background: #fff !important;
}


最后看到这篇问答才发现,ipad/iphone改变的其实是颜色或背景的透明度,将其复写即可:

.ipad input:disabled {
   -webkit-text-fill-color: rgba(0, 0, 0, 1);
   -webkit-opacity: 1;
}

另外如果想要复写样button/select的默认按钮样式,可以使用以下CSS除去。

    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;