[TIL] CSS :readonly is not for select fields

Today I learned that the CSS readonly attribute for form fields does only work with input modes that allow variable user input that’s not “type-safe”:

The attribute is not supported or relevant to <select> or <input> types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image. MDN

See the test examples

See the Pen Untitled by Anselm Hannemann (@anselmh) on CodePen.

If you need a fix

Regardless of what the specification say, we may end up needing a solution for this. It’s not really advisable to use readonly if it’s not supported by the browser.

Fortunately, we have something in our toolchain that’s even better as it adds additional accessibility information that we’d have to provide anyway:

select[aria-readonly="true"] {
    pointer-events: none;
}

You may want to style more, add more information, other attributes to it. But this is the bare minimum to make this work.

Why not use disabled

You may ask why not use disabled instead? It has a couple of implications on user readability. For example, readonly values are selectable with a cursor while the disabled state disallows it. It has effects on accessibility as well and therefore does not feel appropriate.

Finally, just because the specification states it’s not applicable due to the data type does not mean we don’t need it in some cases for a specific user experience. Just because it’s not built in the platform doesn’t mean we’re discouraged to build it the way I did.

Sources:
Written on as Note