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

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

изменить внешний вид полосы прокрутки

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

код

::-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


9 комментариев:

  1. Вик, привет! Что - то у меня не перекрашивается ползунок.

    ОтветитьУдалить
  2. Ползунок у тебя я вижу красного цвета стал.

    ОтветитьУдалить
  3. Да ладно???? У меня он по прежнему голубой! Как это так? Ты видишь, а у меня все по старому??!!!!

    ОтветитьУдалить
  4. Ирина, с какого браузера работаешь. это и в браузере может быть дело все по разному отображают.

    ОтветитьУдалить
  5. Вик, пришли пожалуйста мне скрин полоски - хоть на нем красоту увидеть:))) Но ведь тогда и % не будут отображаться?

    ОтветитьУдалить
  6. Ирина, ну понятно, думала, что уже ни кто на нём не сидит. Отправила тебе фото скрин как видно на Яндекс и Хром.

    ОтветитьУдалить
  7. А на чем сидят. Давай я перейду на новый! Что лучше?

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск