Khi bạn truy cập một website, và dùng chuột tô một vùng chọn, hoặc Ctrl+A cả website, bạn có để ý màu sắc của vùng chọn đó? Đó chính là Seletion.
Seletion của css có sẵn trong trình duyệt nhưng rất ít được sử dụng bởi tác dụng của nó chẳng quan trọng nhiều, mặc định là màu xám, hoặc xanh…, tùy thuộc vào trình duyệt.
Bạn có thể dễ dàng thấy khi bôi đen 1 đoạn văn bản hoặc 1 vùng trên trang web của mình.
Theo mình đây là 1 tùy chỉnh hay để thay đổi màu sắc khu vực được chọn, tuy đơn giản nhưng nó sẽ làm thị giác người đọc không mệt mỏi nếu được sử dụng linh hoạt.
Demo:
[el55b9e28574fe8][/el55b9e28574fe8]
Sử dụng:
Thêm các class sau vào trong file css của bạn, rồi sử dụng các class này tại nơi các bạn muồn vùng chọn có màu mình muốn, các bạn đổi màu nào mình thích nhá
[code language=”css”]
/*Sử dụng các class này cho các html bạn muốn*/
.normal::selection {background:#cc0000;color:#fff; }
.moz::-moz-selection {background:#cc0000; color:#fff; }
.webkit::-webkit-selection {background:#cc0000;color:#fff; }
/*Sử dụng cho cả trang*/
::selection {
background: #9f9
}
::-webkit-selection {
background: #9f9
}
::-moz-selection {
background: #9f9
}
[/code]
Kết luận:
Hy vọng với một vài dòng css trên có thể làm cho website của bạn có sự mới lạ hơn. Cảm ơn các bạn đã quan tâm.