Change disabled form field style on iOS

ionic-v1
1

Hi all

I have a problem with my ionic app running in ios.
Due to the webkit default styles, all the disabled input elements and their content seams watery and with a gray overlay. I tried to make a screen shot but due to compression you can not see it very clearly on it.

image
ios.png736×322 7.3 KB

I tried different styles and changes like:

.disabled {
  background-color: #f8f8f8;
  -webkit-text-fill-color: rgba(0, 0, 0, 1) !important;
  -webkit-opacity: 1 !important;
}

(the disabled class is applied to every disabled element and is working fine).

Has anybody ever found a solution for this?

Thanks,
Floyd

2

Sorry to revive an old post but I too had a simular issue as only iOS shows a [disabled] input box with an opacity below 1. This post did help me figure out that half of it.

Here is my css that will target all input fields that are disabled:

input[disabled] {
color:#000 !important;
background: none !important;
opacity: 1 !important;
}

1 Like
3

I ended up using something similar but I had to add classss like checkbox-disabled and item-checkbox-disabled.