The read-write pseudo-class

The read-write pseudo-class specifies the style of inputs whose values ​​can be changed.

Syntax

cssselector:read-write {}

Example

Let's set blue borders for the input where data can be entered:

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

Результат:

See also

  • the :read-only pseudo-class
    that sets a style for inputs that cannot be changed
  • 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 :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