Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

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

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

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

код

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