Skip to content
GitLab

Don't style `readonly` inputs as `disabled`

Merged Mark Otto requested to merge readonly-inputs into main

Fixes #33925 (closed).

For awhile now we've styled readonly text inputs as disabled by graying out their background. However, these two input attributes do different things and shouldn't be styled the same. Here's how it works with this PR, and in most browsers by default:

  • disabled inputs essentially have no interaction—you can't tab to them, you can click or focus into them. You can select their text. These will have a light gray background applied to them.

  • readonly inputs can be focused and their text selected. These will look and feel like normal inputs, but you can't modify their values.

Relatedly, I've also removed the Chrome-specific focus styling from readonly .form-control-plaintext class here. This just brings it further in line with "plain text" and fixes a visual glitch as this doesn't appear in say Safari.

Biggest question I have is should we have some other indicator that something is readonly? /cc @julien-deramond and @patrickhlauke for thoughts.

  • Update docs copy to reflect these changes