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:
<!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:
<!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 36.0
- Internet Explorer 13.0
- Firefox 3.0 -moz-
- Safari 9.0
- Opera 23.0