The Boolean readonly
attribute, when present, makes the element not mutable, meaning the user can not edit the control.
If the readonly
attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.
The readonly
attribute is supported by text
, search
, url
, tel
, email
, password
, date
, month
, week
, time
, datetime-local
, and number
types and the <input>
form control elements. If present on any of these input types and elements, the <textarea>
pseudo class will match. If the attribute is not included, the :read-only
pseudo class will match.:read-write
The attribute is not supported or relevant to
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 <select>
image
.
Note: Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly
attribute does not apply.
When an input has the readonly
attribute, the :read-only
pseudo-class also applies to it. Conversely, inputs that support the readonly
attribute but don't have the attribute set match the :read-write
pseudo-class.