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

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

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

<style type=text/css>


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

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

Оцени публикацию:

Оценили человек: 13

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

→ Отступы в кнопках браузеров

→ Нужный слой выше YouTube-видео

→ Закругляем уголки в IE через CSS

→ Сокращённые формы записи

→ Скрытые возможности text-shadow

Комментарии посетителей:

У вас ошибка вы забыли закрыть тег <style>

18 июня 2009, 21:34 коммент полезен : +2 # Гость
в IE 8 не работает.

01 августа 2009, 12:03 коммент полезен : 0 # Гость

Работает

19 июля 2010, 18:55 коммент полезен : 0 # P@n

у меня опера 9 и 10 и все не работает - как был скрол серым таким и остался.

08 августа 2009, 23:49 коммент полезен : 0 # Гость

У меня тоже в ИЕ8 не работает, аж зла не хватает! Это разве новшество??? Для своих сайтов раньше такие красивые полосы прокрутки сделал, под дизайн, так сочетались, а теперь вместо них серятина. И в Гугле Чроме тоже самое.

14 августа 2009, 21:56 коммент полезен : +1 # Гость

все работает=)

15 сентября 2009, 17:37 коммент полезен : +1 # Гость
у кого не раюотает пробовали прописать не для body, a для html?

25 сентября 2009, 19:22 коммент полезен : 0 # Гость

Тэг style в head вставляется.

19 июля 2010, 18:57 коммент полезен : 0 # P@n

Заработало если прописать для html "в scc файле",но только в IE...
У кого-ньть есть ещё идеи???

26 сентября 2009, 01:19 коммент полезен : 0 # Гость
Надо чтобы доктайп у вас был такой - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Тогда всё работает!!

26 сентября 2009, 01:53 коммент полезен : +1 # Гость
блин... СПАСИБО ТЕБЕ!!!!!!!!!!!

10 октября 2009, 12:29 коммент полезен : 0 # Гость
Это только для IE, нестандартное расширение CSS2 Microsoft.
Для других браузеров - только JavaScript.

31 октября 2009, 07:40 коммент полезен : 0 # Гость

01 ноября 2009, 20:59 коммент полезен : 0 # Гость

Ща попробую

17 июля 2010, 12:34 коммент полезен : 0 # X-den (гость)
Везде работает. И в опере и в ишаке.

19 июля 2010, 18:55 коммент полезен : +1 # P@n

Не работает...не под Мозули, не под что....

13 сентября 2010, 11:33 коммент полезен : 0 # Гость

06 августа 2010, 12:47 коммент полезен : 0 # Гость
у кого не работает после установки кода! Попробуйте почистить кеши браузеров.

01 декабря 2010, 21:05 коммент полезен : 0 # Гость
26 февраля 2011, 23:16 коммент полезен : 0 # Гость
Нет, не робит, к сожалению. Хотел полосочки на CSS сделать, придется со скриптом возиться)

31 мая 2011, 13:05 коммент полезен : 0 # Гость