CSS | :read-only Selector
The :read-only selector is used to selecting that element which is readable only. The read-only is used to disable the fields. Mainly read-only pseudo-class represent an element that can’t be edited by the user.
Syntax:
:read-only { // CSS property }
Example 1:
html
<!DOCTYPE html> < html > < head > < style > input:-moz-read-only { text-align: center; margin:10px; padding: 5px; color:Green; } input:read-only { text-align: center; margin:10px; padding: 5px; color:Green; } h1 { color:green; } body { text-align:center; } </ style > </ head > < body > < h1 >Geeksforgeeks</ h1 > < h2 >:read-only selector</ h2 > < p >Read contents only:< br >< input readonly value = "GeeksforGeeks: computer science portal"></ p > </ body > </ html > |
Output:
Example 2:
html
<!DOCTYPE html> < html > < head > < title >:read-only selector</ title > < style > h1 { color:green; } input:read-only { background-color:Green; color:white; text-align:center; } input:-moz-read-only { background-color:Green; border:1px solid black; border-radius:4px; padding:4px; color:white; text-align:center; } body { text-align:center; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h2 >:read-only Selector</ h2 > < input type="text" value="Editable Contents"> < input type="text" value="Non-editable contents" readonly> </ body > </ html > |
Output:
Supported Browser: The browser supported by :read-only selector are listed below:
- Google Chrome 1.0 and above
- Edge 13.0 and above
- Firefox 78.0 and above
- Safari 4.0 and above
- Opera 9.0 and above
Please Login to comment...