Tùy chọn màu sắc khi bôi đen chữ trên web

1. Demo

Bạn có thể thử chọn (bôi đen) đoạn văn bản này để thấy hiệu ứng tùy chỉnh đang hoạt động.

2. Cách thực hiện bằng CSS

Để thay đổi màu chữ và nền khi người dùng chọn văn bản, bạn chỉ cần sử dụng pseudo-element ::selection như sau:

::selection {
  color: #fff;
  background: #ff4e46;
}

Trong ví dụ trên:

• color là màu chữ khi được bôi đen
• background là màu nền được áp dụng

3. Lưu ý

• ::selection chỉ hỗ trợ một số thuộc tính CSS cơ bản như color, background, text-shadow, outline, không hỗ trợ hiệu ứng gradient hay border.
• Nếu muốn áp dụng cho tất cả trình duyệt, bạn nên kiểm tra khả năng tương thích hoặc thêm prefix như ::-moz-selection cho Firefox (nếu thật sự cần).

Kết luận

Việc tùy chỉnh màu sắc khi bôi đen văn bản giúp website của bạn trở nên tinh tế và chuyên nghiệp hơn. Hãy chọn màu phù hợp với giao diện tổng thể để nâng cao trải nghiệm người dùng mà không làm ảnh hưởng đến khả năng đọc.