Bộ chọn :read-only được dùng để chọn phần tử chỉ đọc. Thuộc tính read-only thường được dùng để vô hiệu hóa các trường. Pseudo-class read-only đại diện cho phần tử mà người dùng không thể chỉnh sửa.
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: Các trình duyệt hỗ trợ bộ chọn :read-only được liệt kê dưới đây:
- Google Chrome 1.0 trở lên
- Edge 13.0 trở lên
- Firefox 78.0 trở lên
- Safari 4.0 trở lên
- Opera 9.0 trở lên