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

09.07.2007 21:02

Комментарии

У вас ошибка вы забыли закрыть тег <style>
|
в IE 8  не работает.
|
у меня опера 9 и 10 и все не работает -  как был скрол серым таким и остался.
|
У меня тоже в ИЕ8 не работает, аж зла не хватает! Это разве новшество??? Для своих сайтов раньше такие красивые полосы прокрутки сделал, под дизайн, так сочетались, а теперь вместо них серятина. И в Гугле Чроме тоже самое.
|
все работает=)
|
у кого не раюотает пробовали прописать не для body, a для html?
|
Заработало если прописать для  html "в scc файле",но только в IE... У кого-ньть есть ещё идеи???
|
Надо чтобы доктайп у вас был такой - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Тогда всё работает!!
|
блин... СПАСИБО ТЕБЕ!!!!!!!!!!!
|
Это только для IE, нестандартное расширение CSS2 Microsoft. Для других браузеров - только JavaScript.
|
<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 версии)
|
Ща попробую :-)8
X-den |
Везде работает. И в опере и в ишаке.
P@n |
Работает
P@n |
Тэг style в head вставляется.
P@n |
:-s (mask)
|
Не работает...не под Мозули, не под что....
|
у кого не работает после установки кода! Попробуйте почистить кеши браузеров.
|
(yea)
|
Нет, не робит, к сожалению. Хотел полосочки на CSS сделать, придется со скриптом возиться)
|
У тебя получилось на скрипте сделать? если да, кинь ссылочку
Ринат |

Copyrights © 2007 - 2026 YaPro.Ru