What are css3 selectors: read-write and :read-only? how to use?

This article brings you an introduction to the css3 selectors: read-write and: read-only. How to use it, let everyone know what the :read-write selector and :read-only selector of CSS3 are, what they do, and how to use them. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css3 :read-write

:read-write is a pseudo-class selector in CSS, which is used to match user-editable elements, that is, readable and writable elements.

Elements belonging to the editable category include:

1. elements (of any type) that are not read-only and not disabled. This means that they have neither the readonly nor the disabled attribute set.

2. A element that is neither read-only nor disabled (similar to input).

3. Any other element that is not or , but has the contenteditable attribute set.

Note: Currently, in most browsers, the :read-write selector can only be used to set input and textarea elements.

css3 :read-only

:read-only is also a pseudo-class selector in CSS, matching anything that does not match the :read-write selector element.

In other words, the :read-only pseudo-class selector matches elements that cannot be edited by the user, that is, it matches any element that is not editable above ↑. For example: elements with attributes such as readonly or disabled set.

The following are examples of elements that can be matched using: read-write:

< input  type = “text” >
< input  type = “number” >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10” >  </ textarea >
< div  class = “random”  contenteditable >  </ div >

The following are examples of elements that cannot be matched using: read-write, that is, examples of elements that can be matched using: read-only :

< input  type = “text”  disabled >
< input  type = “number”  disabled >
< input  type = “number”  readonly >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10”  readonly >  </ textarea >
< div  class = “random” >  </ div >  <！ - 无法使用contenteditable编辑的常规元素 - >

Although this is the behavior recommended by the specification, browser behavior appears to vary: what may be considered read and write in one browser will be considered read and written in another browser. Read-only, so the :read-write style we apply may not work with some browsers.

Like other pseudo-class selectors, both the :read-write selector and the :read-only selector can be linked with other selectors, such as :hover and the pseudo-element ::after.

For example, :read-write :focus will provide the style for the editable text area:

textarea:read-write:focus {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

textarea:read-write:before {
    content: "Type here...";
    color: #aaa;
}

For example, :read-only :hover will provide the style for the div (regular) on the page:

div:read-only:hover {
    background-color: #eee;
}

div:read-only:before {
    content: "?";
    color: deepPink;
}

Browser support

The number in the table indicates the first browser version number that supports this attribute.

In Firefox browser, use the prefix: -moz-read-write, -moz-read-only; and the read-write selector and read-only selector are not supported on Internet Explorer and Android use.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. Recommended related video tutorials: CSS3 tutorial!

The above is the detailed content of What are css3 selectors: read-write and :read-only? how to use?. For more information, please follow other related articles on the PHP Chinese website!