Hướng dẫn thay đổi kích thước và màu sắc của thanh cuộn

Thanh cuộn scrollbar giúp chúng ta cuộn lên xuống trong quá trình xem trên trình duyệt, sau đây mình Hướng dẫn thay đổi kích thước và màu sắc của thanh cuộn đơn giản nhất.

Các bạn chỉ cần copy đoạn CSS dưới đây dán dưới thẻ <b:skin> hoặc trước thẻ đóng </b:skin> đều được.

::-webkit-scrollbar {

width: 15px; height:15px;

}

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);

background:#fff;

}

::-webkit-scrollbar-thumb {

background: #0f7d50;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

Sau đó các bạn lưu lại là xong, thay đổi kích thước và màu sắc cho phù hợp.

Trong đó:

::-webkit-scrollbar {

width: 15px; height:15px;

}

Là kích thước Rộng - Cao của thanh cuộn

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);

background:#fff;

}

Màu nền trắng và đường viền của thanh trượt (giống như đường ray của tàu hỏa)

::-webkit-scrollbar-thumb {

background: #0f7d50;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

Màu nền của thanh cuộn (đây là chiếc tàu hỏa)

Lưu ý: Cách làm trên nó sẽ áp dụng cho tất cả những chỗ nào trên blog có thanh cuộn như thẻ <pre> <code> ...

Đơn giản như vậy là bạn đã thay đổi kích thước và màu sắc của thanh cuộn scrollbar .