The readonly Attribute

The Current State of HTML5 Forms

<input type="text" value="can't touch this" readonly>
<textarea readonly>You can't change this… or can you?</textarea>

Live Demo

Text input

Textarea

 


Firefox

Safari

Safari

Chrome

Opera

IE

Android

The Low Down

The readonly attribute makes a form control non-editable (or “read only”).

  • A read-only field can’t be modified, but, unlike disabled, you can tab into it, highlight it, and copy its contents.
  • Setting the value to null does not remove the effects of the attribute. Instead use removeAttribute('readonly').
  • You can target elements that are read only with the :read-only pseudo-class, and its writability with the :read-write pseudo-class. Or, if you want to specifically target the presence of the attribute, you can use input[readonly] and input:not([readonly]).
  • readonly is only relevant for type text, search, url, tel, email, number, password, and the date/time input types. It is also valid on <textarea>
  • readonly is ignored for type hidden, range, color, checkbox, radio, file, button, submit and image.

Our Cookie Policy and Privacy Policy outline how we use cookies to help personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.