Изменение цвета полосы прокрутки в css

Скроллбар или полоса прокрутки находится в правой части окна браузера. При желании Вы можете изменить ее цвет, подстроив под дизайн своего сайта. О том как это сделать читайте ниже.

Для оформления скролл бара нужно после тэга <HEAD> вставить код следующего типа:

<style type=text/css>
<!--
body { scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000; }
//-->

Рассмотрим каждое свойство по отдельности:

scrollbar-face-color - задаёт основной цвет полосы прокрутки. 

scrollbar-highlight-color - цвет левого верхнего угла самого скролл бара.

scrollbar-shadow-color - этим цветом отображается правый нижний угол скролл бара.

scrollbar-3dlight-color - тоненькая кромка, находящаяся в левом верхнем углу, ближе к краю нежели scrollbar-highlight-color. 

scrollbar-arrow-color - определяет цвет стрелочек.

scrollbar-track-color - цвет дорожки по которой перемещается скролл бар.

scrollbar-darkshadow-color - тоненькая кромка, находящаяся в правом нихнем углу, ближе к краю нежели scrollbar-shadow-color. 

Вроде всё! Однако стоит отметить, что данные свойства поддерживают браузеры Internet Explorer 5.5 и выше. Остальные просто игнорируют свойства CSS, не выдавая никаких ошибок.

Автор статьи: Silver
Email: admin@web-silver.ru
Оцени публикацию:
  • 21,89
Оценили человек: 21

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • У вас ошибка вы забыли закрыть тег <style>
    18 июня 2009, 17:34 коммент полезен : +4 # Гость
  • в IE 8  не работает.
    01 августа 2009, 08:03 коммент полезен : 0 # Гость
    • Работает
      19 июля 2010, 14:55 коммент полезен : 0 # P@n
  • у меня опера 9 и 10 и все не работает -  как был скрол серым таким и остался.
    08 августа 2009, 19:49 коммент полезен : 0 # Гость
  • У меня тоже в ИЕ8 не работает, аж зла не хватает! Это разве новшество??? Для своих сайтов раньше такие красивые полосы прокрутки сделал, под дизайн, так сочетались, а теперь вместо них серятина. И в Гугле Чроме тоже самое.
    14 августа 2009, 17:56 коммент полезен : +1 # Гость
  • все работает=)
    15 сентября 2009, 13:37 коммент полезен : +1 # Гость
  • у кого не раюотает пробовали прописать не для body, a для html?
    25 сентября 2009, 15:22 коммент полезен : 0 # Гость
    • Тэг style в head вставляется.
      19 июля 2010, 14:57 коммент полезен : 0 # P@n
  • Заработало  если прописать для  html "в scc файле",но только в IE...
    У кого-ньть есть ещё идеи???
    25 сентября 2009, 21:19 коммент полезен : 0 # Гость
  • Надо чтобы доктайп у вас был такой - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Тогда всё работает!!
    25 сентября 2009, 21:53 коммент полезен : 0 # Гость
  • блин... СПАСИБО ТЕБЕ!!!!!!!!!!!
    10 октября 2009, 08:29 коммент полезен : +1 # Гость
  • Это только для IE, нестандартное расширение CSS2 Microsoft.
    Для других браузеров - только JavaScript.
    31 октября 2009, 04:40 коммент полезен : 0 # Гость
  • <style type=text/css>

    body { scrollbar-face-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-3dlight-color: #000000;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #000000;
    scrollbar-darkshadow-color: #000000; }

    </style>


    И нули, соответственно поменять на желаемый цвет

    Работает только с IE (от 5.5 версии)
    01 ноября 2009, 17:59 коммент полезен : 0 # Гость
  • Ща попробую:-)8
    17 июля 2010, 08:34 коммент полезен : 0 # X-den (гость)
  • Везде работает. И в опере и в ишаке.
    19 июля 2010, 14:55 коммент полезен : +1 # P@n
    • Не работает...не под Мозули, не под что....
      13 сентября 2010, 07:33 коммент полезен : 0 # Гость
  • :-s (mask)
    06 августа 2010, 08:47 коммент полезен : 0 # Гость
  • у кого не работает после установки кода! Попробуйте почистить кеши браузеров.
    01 декабря 2010, 18:05 коммент полезен : 0 # Гость
  • (yea)
    26 февраля 2011, 20:16 коммент полезен : 0 # Гость
  • Нет, не робит, к сожалению. Хотел полосочки на CSS сделать, придется со скриптом возиться)
    31 мая 2011, 09:05 коммент полезен : 0 # Гость
    • У тебя получилось на скрипте сделать? если да, кинь ссылочку
      10 октября 2011, 09:54 коммент полезен : 0 # Ринат
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »