Select elements accepting text input or displaying only text

Question

How to select elements that can accept text as an input as well as elements that support only text display?

Answer 1

You can do this with a :read-write pseudo-class.

Browser text case.

:-moz-read-write
{}

:read-write
{}

input[readonly],
input[type=date],
input[type=time],
textarea
{}

• :read-write will select any element that can accept text input;
• Can't use :read-only, due to poor support in Safari and Firefox. Instead, use a basic attribute selector. (readonly attribute is supported only on text-accepting inputs);
• We have to select textarea with a :read-only as well, but it's simpler to just write textarea;
• Firefox doesn't select date and time input types with :read-write, so we have to select them explicitly.