Tạo kiểu cho input có thuộc tính readonly với CSS

Bộ chọn :read-only

:read-only chọn phần tử **không thể chỉnh sửa**: <input> có readonly hoặc disabled, hoặc phần tử không phải control form (div, p, span... mặc định read-only).

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    input:read-only {
      background-color: blue;
      color: white;
    }
  </style>
</head>
<body>
  <form>
    Môn học: <input type="text" name="subject" value="Toán"><br> <!-- read-write -->
    Sinh viên: <input type="text" name="student" readonly value="Amit"><br> <!-- read-only -->
  </form>
</body>
</html>

Ô "Sinh viên" có readonly → nền xanh, chữ trắng. Ô "Môn học" không có readonly → không khớp.