Mặc định khi người dùng bôi đen (select) văn bản trên website WordPress, trình duyệt sẽ hiển thị màu nền và màu chữ do hệ điều hành quy định (thường là nền xanh dương và chữ trắng). Tuy nhiên, bạn hoàn toàn có thể thay đổi màu bôi đen này để phù hợp hơn với giao diện hoặc màu sắc thương hiệu của website.
Trong bài viết này, mình sẽ hướng dẫn bạn cách thay đổi màu bôi đen văn bản (selection highlight) cho website WordPress bằng cách sử dụng CSS đơn giản.
I. Vì sao nên thay đổi màu bôi đen văn bản?
🟢 Tạo dấu ấn thương hiệu độc đáo
🟢 Tăng tính đồng bộ màu sắc cho website
🟢 Cải thiện trải nghiệm người dùng
🟢 Tạo cảm giác chuyên nghiệp hơn
Ví dụ: Website của bạn dùng tông màu tím, bạn có thể đổi màu bôi đen thành tím nhạt + chữ trắng để hài hòa hơn.
II. Cách thay đổi màu bôi đen văn bản bằng CSS
Bạn chỉ cần thêm đoạn mã CSS vào theme WordPress (có thể chèn trực tiếp trong Customize hoặc child theme) như sau:
|
::selection { ::-moz-selection { |
Giải thích:
✔️ ::selection là pseudo-element dùng để định dạng phần văn bản được chọn.
✔️ ::-moz-selection dành riêng cho trình duyệt Firefox (cần khai báo riêng để đảm bảo tương thích).
III. Hướng dẫn chèn mã CSS vào WordPress
Bạn có thể thực hiện theo một trong hai cách:
✅ Cách 1: Thêm CSS trực tiếp trong Giao diện
👉 Truy cập WordPress Admin → Giao diện → Tùy biến (Customize)
👉 Chọn “CSS bổ sung” (Additional CSS)
👉 Dán đoạn mã CSS trên vào
👉 Nhấn “Xuất bản” để lưu thay đổi
✅ Cách 2: Thêm vào file style.css của theme con (child theme)
👉 Truy cập Appearance → Theme File Editor
👉 Mở file style.css của theme con
👉 Dán đoạn CSS vào cuối file
👉 Nhấn “Cập nhật tập tin”
Gợi ý màu đẹp bạn có thể dùng:
🎨Xanh lá: #2ecc71
🎨Đỏ cam: #e74c3c
🎨Tím: #9b59b6
🎨Xanh dương: #3498db
🎨Vàng nhạt: #f1c40f
IV. Kết luận
Việc thay đổi màu bôi đen văn bản tuy đơn giản nhưng góp phần làm cho website WordPress của bạn trở nên tinh tế và chuyên nghiệp hơn. Bạn nên lựa chọn màu sắc hài hòa với giao diện để tăng tính thẩm mỹ và tạo ấn tượng tốt với người dùng.
Hãy áp dụng ngay hướng dẫn trên và đừng quên chia sẻ kết quả bên dưới nếu bạn thấy nó hữu ích nhé!
⚠️ Lưu ý:
Nếu theme bạn sử dụng có hệ thống cache hoặc trình tạo giao diện (page builder), hãy xóa cache sau khi chỉnh sửa CSS để thấy thay đổi.