Why is Chrome treating input[type=submit] as read-only? (no longer working)

Question

In the last few days, I have run into a problem in Chrome where my submit buttons on my form are no longer clickable. I have the following HTML:

<input type="submit" value="Save" />

And, as it turns out, the following SASS is unexpectedly affecting the buttons, causing them to no longer work:

input:read-only {
  pointer-events: none;
}

Why is this happening? I'm running Chrome "Version 92.0.4515.107 (Official Build) (64-bit)". What's going on?

Answer 1

It turns out that in Chrome 92.0.4515.107, a change was introduced that treats

<input type="submit" value="Save" />

as a read-only input. So the selector input:read-only now includes this submit button in the results. If by chance you have styling or Javascript which affects those elements, and you also use inputs of type submit, then you likely have some new headaches popping up recently.

Change your styling selectors to input:read-only:not([type=submit]) to eliminate the problem.

My styling examples are SASS. Apologies if these don't work in plain CSS. Anyone with knowledge of how to write plain CSS is encouraged to update my answer appropriately or comment below (thanks!).