make texarea readonly using CSS

Question

I am trying to make my textarea readonly using CSS however not sure how to do it. I have tried following things, none of them seems to work.

I know how to do it using html, but I don't want to do and change the html of all the textarea.

readonly:readonly;

and

readonly:True;

and

readonly:"readonly";

Answer 1

readonly is an HTML attribute rather than a CSS property.

To prevent editing via HTML, add the readonly attribute to your textarea tag: <textarea readonly>content!</textarea>

To prevent editing via CSS, use pointer-events:

textarea {
  pointer-events: none;
}

This will cause the browser to ignore clicks to the element, thus preventing alteration. (There may however be other ways to edit it.)

Answer 2

If you need to do this using css only, you can try pointer-events: none;. However this is not crossbrowser decision

Answer 3

Try this in HTML:

<textarea readonly>
  Your text goes here.......
</textarea>