Disabled Input Visibility


I’ve recently noticed a funny behavior regarding disabled inputs on iOS devices and Macs running Big Sur, they will render the value transparent and are not able to be seen. This happens in multiple browsers and devices. The bug does not happen on Macs running OS before Big Sur (or windows/android devices). This post describes a workaround to fix this behavior.

TLDR Make sure to set your input background. If left empty (none), it will render a “disabled” input’s value as transparent, despite giving the value a color. If you would like a transparent background on your disabled input, set it as a color with opacity at 0% but do not leave the background style as “none”.

A few photos to show my predicament:

1: Normally functioning, disabled input with background style: none. Mac not running Big Sur.

2: Poorly functioning, disabled input with background style: none. Mac running Big Sur or iOS device (multiple browsers and multiple devices we’re tested).

3: Note the input is still there, just rendered transparent for the poorly functioning situation.

In the inspector, it appears to be a quirk where inputs without clearly specified background colors will pass on the transparent background of “none” to the value within it, when disabled.

I hope this helps someone puzzled by the idipsyncratic behavior.

Hello, thanks for flagging! Would you mind filing a bug report for this behavior, and including your test page? We’d love to take a look and see if this is something we can address!

This topic was automatically closed after 14 days. New replies are no longer allowed.