стили для полосы прокрутки

Привет, друзья. Давно был опубликован на блоге пост как изменить внешний вид полосы прокрутки. Мелочь, казалось бы, а без внимания не оставляет. Сегодня по просьбе читателя ещё её немного стилизуем. Разукрасим не только ползунок, но и саму полосу. Добавим для пущей важности закругления. Вот как - то так она будет выглядеть в браузере.

Я для наглядности в коде задала контрастные цвета. Вы можете подобрать свои. Воспользуйтесь этой таблицей.

код

::-webkit-scrollbar-button {background-image:url('');
background-repeat:no-repeat;
width:6px;
height:0px}

::-webkit-scrollbar-track {background-color: #9999FF;box-shadow: 0px 0px 3px #8E8E8E inset;}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;background-color: #CC0000;
box-shadow:0px 1px 1px #fff inset;

background-position:center;
background-repeat:no-repeat;}

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}

::-webkit-scrollbar{width:17px;}

Код устанавливается во вкладке Тема над строкой  ]]></b:skin>. 

Вот и все дела. Спасибо за визит и до встречи.  

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email