Selector of css3: how to use read-write and: read-only
Today, I would like to share with you the selector of css3: read-write and: read-only how to use the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.
Css3:read-write
Read-write is a pseudo-class selector in CSS that matches user-editable elements, that is, readable and writable elements.
Elements that belong to the editable category include:
1. Elements that are not read-only and not disabled (of any type). This means that they set neither the readonly property nor the disabled property.
Elements that are neither read-only nor disabled (similar to input).
3. Any other element that is not or, but has a contenteditable attribute set.
Note: currently, in most browsers, the: read-write selector is only used to set the input and textarea elements.
Css3:read-only
: read-only is also a pseudo-class selector in CSS, matching any elements that do not match the: read-write selector.
In other words, the read-only pseudo-class selector matches elements that are not editable by the user, that is, any element that is not editable by the ↑ above. For example: an element with attributes such as readonly or disabled set.
The following is an example of elements that can be matched using: read-write:
The following is an example of elements that cannot be matched using: read-write, that is, elements that can be matched using: read-only:
Although this is the recommended behavior of the specification, the browser behavior seems to be different: it is possible that what is read and written in one browser will be considered read-only in another, so what we apply: the read-write style may not apply to some browsers.
Like other pseudo-class selectors, both the: read-write selector and the: read-only selector can be linked to other selectors, such as: hover and pseudo element:: after.
For example,: read-write+:focus will provide styles for editable text areas:
Textarea:read-write:focus {
Box-shadow:002px1pxrgba (0Pert 00.2pm)
}
Textarea:read-write:before {
Content: "Typehere..."
Color:#aaa
}
For example,: read-only+:hover will provide styles for div (general) on the page:
Div:read-only:hover {
Background-color:#eee
}
Div:read-only:before {
Content:?
Color:deepPink
}
These are all the contents of the article "selector of css3: how to use read-write and: read-only". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
