134 of 313 menu

The read-only pseudo-class

The read-only pseudo-class specifies the style of inputs with the readonly attribute. This input is read-only, i.e. it is impossible to enter or change data in it, but you can select and copy it.

Syntax

selector:read-only { }

Example

Let's give the read-only input a pale gray border:

<p> <label>Enter text</label> <input type="text"> </p> <p> <label>Read text</label> <input type="text" value="text" readonly> </p> input:read-only { border: 1px solid #D8DFE8; }

:

See also

  • the :read-write pseudo-class
    that sets a style of the inputs available for change
  • the :default pseudo-class
    that sets a default style for elements
  • the :indeterminate pseudo-class
    that styles switches that are in an indeterminate state
  • the :optional pseudo-class
    that sets a style for the input that does not have a required attribute
  • the :placeholder-shown pseudo-class
    that sets a style for elements when displaying tooltip text
  • the :required pseudo-class
    that sets a style of the input that has the required attribute set
  • the :focus-within pseudo-class
    that styles the elements in focus
  • the caret-color property
    that sets a color of the text cursor in input
← →
↑
byenru