Để làm nổi bật hộp văn bản khi được chọn (tức là khi hộp văn bản nhận được sự tập trung - focus), chúng ta cần sử dụng thuộc tính CSS border, chứ không phải outline. Thuộc tính border sẽ tạo đường viền cho hộp văn bản theo yêu cầu của đề bài.

Xét từng tùy chọn để tìm đáp án đúng:

• A. input[type='text"]: focus { border: 2px solid #007b£;}
  Sai do cú pháp sai dấu nháy kép đóng " gần từ khóa focus và giá trị màu #007b£ có ký tự không hợp lệ.
• B. input[type="'text"]:focus { outline: 2px solid #007bf; }
  Sai vì dùng outline thay vì border. outline là một đường viền ngoài nhưng không chiếm không gian của phần tử.
• C. input[type="text"]:hover { border: 2px solid #007bf; }
  Sai do sự kiện kịch hoạt là hover, không phải focus.
• D. input[type="'text"]:hover { outline: 2px solid #007bi; }
  Sai về cả cú pháp nháy kép đóng ' gần text và màu #007bi có ký tự không hợp lệ, và dùng outline với sự kiện hover.

Cả bốn đáp án đều có lỗi, tuy nhiên nếu sửa lỗi trong các câu trên thì đáp án hợp lý nhất sẽ là:

input[type="text"]:focus { border: 2px solid #007bf; }

Với điều kiện cần sửa lại lỗi cú pháp và mã màu cho đúng.

Khi giải bài này, học sinh cần chú ý:

• Cú pháp CSS: Sử dụng đúng dấu nháy kép " và dấu ngoặc cho selector.
• Phân biệt thuộc tính: border và outline có chức năng khác nhau, trong bài này cần dùng border.
• Trạng thái của phần tử: focus được dùng khi phần tử nhận được sự tập trung, trong khi hover khi con trỏ chuột đang ở trên phần tử.
• Mã màu: Sử dụng đúng mã màu bằng cách kiểm tra các ký tự hợp lệ.