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...