CSS :read-write Selector

CSS :read-write selector selects every element on a page that is editable by the user. This editable element can be an input, textarea, paragraph, div, etc.

Elements that are editable fall into the following three categories:

  • <input> elements that are neither readonly nor disabled.
  • <textarea> elements that are neither readonly nor disabled.
  • Any other element except the input and textarea that have the contenteditable attribute set.

This simply means that the :read-write selector will only work for those elements which fall into these three categories.

The :read-write selector in the following example sets a yellow background to only those inputs that are editable:

Example:

input:read-write{
    background: yellow;
}

Here is one more example which sets a yellow background to those textareas which are editable:

Example:

textarea:read-write{
    background: yellow;
}

You can also select and style other editable elements such as paragraphs, divs, lists, etc. using the :read-write selector. But the only condition is that they must be editable which we can do with the help of the contenteditable attribute.

See this example:

Example:

p:read-write{
    background: pink;
}
div:read-write{
    background: yellow;
}

CSS Syntax

The syntax of the :read-write selector is as follows:

:read-write{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :read-write selector.

Selector
:read-write36.013.078.09.023.0

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.