Disabled input fields greyed out on IOS

Questions
1

Hi All,

I’ve got a few input boxes that I enable / disable with a toggle.
These inputs sit closely together and in ‘view mode’ it is important that a user can easily distinguish between the different fields at a glance (this is a music performance app - so real time usability is really important). As such I have set the formatting of each field so it is easy to visually distinguish between them.

When viewing on desktop, regardless of whether the fields are enabled or disabled, the formatting (font colours) remain the same (as I want), however, now testing this on an iPad and iPhone, when the fields are disabled, all of the fields are greyed out (I guess this is expected behaviour), however it impacts the usability quite significantly.

Does anyone know if this is something that can be overwritten / altered in some way?? Is this perhaps a Bubble setting that could be changed?

Thanks in advance.

2

We don’t have such settings in our code, so I think this is the native behavior of iOS (http://stackoverflow.com/questions/21400182/safari-css-font-color-issue). Generally speaking, it’s not a good idea to alter the native browser’s behavior as it’s more consistent for users.

3

Thanks Emmanuel.

Yeah, I figured that was probably the case.
I think with the appropriate use of auto-binding privacy controls, I can keep the fields open (enabled), but restricted to certain roles. This should give me what I need I’d say. Probably a better approach than open access.

Cheers
Lyndon

4

I added an ‘unclickable’ group layer over the ‘enabled’ input fields so they can’t be activated.

5

Hi. I am looking for a way to implement this solution. Could you describe this in a little more details please?