Select elements accepting text input or displaying only text

40 views Asked by At

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

1

There are 1 answers

0
CyberAP On BEST ANSWER

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.