Thay đổi màu của tô chọn chữ bằng CSS

Thay đổi màu của tô chọn chữ bằng CSS
Trước đây thì mình đã có một bài viết hướng dẫn cách thức bỏ chọn chữ tại website của bạn. Hôm nay thì mình xin chia sẻ với các bạn cách để thay đổi màu phần tô chữ mà chúng ta chọn. Như ai cũng biết thì khi bạn tô chọn chữ tại bất kì một trang web nào, hầu hết tất cả chúng đều sử dụng một màu duy nhất đó là xanh biển. Điều này có bao giờ làm cho bạn cảm thấy nó nhàm chán quá và muốn phá cách một tý không? Nếu có bạn hãy sử dụng đoạn CSS sau đây.

Thay đổi màu của tô chọn chữ bằng CSS

::selection {
    background: #FA4B2A;
    color: #FFF;
    }
::-moz-selection {
    background: #FA4B2A;
    color: #FFF;
}
đối với đoạn css này, bạn có thể thay đổi màu phần đã tô và cả màu của chữ đã được tô nữa, như đoạn code ở trên thì phần tô là màu đỏ và chữ sẽ là màu trắng.

Ngoài ra nếu bạn muốn áp dụng nó cho một thẻ hoặc một thuộc tính bất kì, bạn có thể sử dụng như sau:
p::selection {
    background: #FA4B2A;
    color: #FFF;
}
div.tochu::selection {
    background: #FA4B2A;
    color: #FFF;
}
chỉ đơn giản như vậy là đã có thể thay đổi thành công màu chữ chọn trên website của chúng ta rồi.

Lời kết

Thực chất thì thủ thuật này không mang lại nhiều ích lợi nào gọi là lớn cho website của chúng ta, nhưng hi vọng rằng nó làm cho website của chúng ta trong khác lạ và ngầu hơn trong mắt người dùng.

Trước đây mình có giới thiệu một hiệu ứng cũng khá hay cho Blogger, nhưng nói chung làm với website nào thì cũng tương tự thôi, kết hợp cả css và javascript:
bạn có thể tham khảo qua để làm đẹp cho website của mình.

2 bình luận

  1. avatar says

    07:35 Ngày 16 tháng 07 năm 2014

    Bạn cho mình hỏi muốn thay đổi màu trên banner thì vào đâu mình cần thay đổi màu mà không biết. Giúp mình với nhé. Tks

  2. avatar says

    08:42 Ngày 16 tháng 07 năm 2014

    Câu hỏi bạn chung chung quá ko biết đường trả lời @@

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.