Изменение цвета полосы прокрутки в 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

youtube.com/watch?v=7hFivbgIEqk

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

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