http://csstemplater.com

Полоса прокрутки состоит из фона, ползунока и концевых кнопок со стрелками.

Стандартный Scrollbar

Кнопки могут быть как активными так и нет. Если скроллбар неактивен, то ползунок отсутсвует.

Неактивный стандартный scrollbar

Самый простой способ изменить полосу прокрутки это задать свойство scrollbar-base-color. Это свойство задает основной цвет полосы прокрутки. Если не определены другие свойства полосы прокрутки, то бегунок и кнопки прокрутки будут отображаться определенным вами цветом с применением трехмерных эффектов. Фон полосы прокрутки будет отображаться тоже этим цветом, но только осветленным.

Например, scrollbar-base-color:lime приведет к результат представленому на рисунке ниже.

CSS scrollbar-base-color

Конечно можно делать более тонкие настройки полосы прокрутки при помощи других CSS свойств.

scrollbar-3dlight-color
- задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.

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

scrollbar-darkshadow-color
- задает цвет "тени", отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних гранией).

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

scrollbar-highlight-color
- задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).

scrollbar-shadow-color
- задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.

scrollbar-track-color
- задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок.

CSS Scrollbar свойства

Как говорилось выше, концевые кнопки могут быть либо активными, либо не активными. Различие между активными и не активными кнопками заключается только в цветах, используемых при отображении кнопок. На активной кнопке стрелка изображается при помощи цветов scrollbar-arrow-color (рисунок выше). На неактивной кнопке стрелка отображается при помощи цветов scrollbar-shadow-color и scrollbar-highlight-color. Остальные элементы активной и неактивной кнопки полностью совпадают.

CSS неактивный scrollbar
Отдельно о фоне

Фон полосы прокрутки задается посредством свойства scrollbar-track-color (смотри рисунок выше). Если это свойство не задано, то фон формируется из двух цветов (scrollbar-highlight-color и scrollbar-face-color), расположенных в шахматном порядке (смотри рисунок ниже).

CSS scrolbar без указания фона
Почему раньше работало, а сейчас нет!

В то время как появился IE5.5 цвет скроллинга окна браузера задавали применяя свойства к элементу BODY. Однако, с выходом IE6 эти стили не всегда работают. Почему?

Это поведение связано с директивой DOCTYPE и её влиянием на боксовую модель браузера. В общем, если браузер находится в режиме совместимости (Quirks mode), то все OK, но если браузер следует стандартам (Standards mode), то стили для скроллбаров, применяемые к BODY не работают. Не вдаваясь в подробности скажу, что это легко исправить, применяя стили также и к элементу HTML (смотрите пример ниже) .
Примеры

/* CSS правила для полос прокрутки окна браузера */
html, body {
scrollbar-3dlight-color:red;
scrollbar-arrow-color:yellow;
scrollbar-highlight-color: aqua;
scrollbar-face-color:green;
scrollbar-shadow-color:fuchsia;
scrollbar-darkshadow-color:blue;
scrollbar-track-color: maroon;
}

/* CSS правила для полос прокрутки элементов TEXTAREA */

textarea {
scrollbar-base-color:lime;
}

Пара слов о других браузерах

Кроме Internet Explorer 5.5+ измененять полосы прокрутки с помощью CSS могут Opera 7.23+ и Konqueror 3.1+. Однако в Opera до версии 7.5 для этого необходимо изменить настройки браузера (Style options). Кроме того, Опера позволяет изменять скроллинг только, если она находится в режиме совместимости (Quirks mode).

Блочные элементы, такие как p, div, table, blockquote и др. отображаются в виде прямоугольника, который занимает 100% ширины родительского элемента. Поэтому последовательные блочные элементы отображаются один под другим.

Инлайновые элементы, такие как em, strong, span, q, abbr и т.п., отображаются в виде прямоугольника, ширина которого соответствует ширине данных внутри него. Поэтому инлайновый элементы отображаются рядом друг с другом, либо рядом с текстом.
Свойство position вместе с top, right, bottom и left свойствами может отображать элемент с нарушением обычного порядка.

Возможные значения

static

Элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе

relative

Позиция элемента смещается относительно его исходного положения вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left).

absolute

Позиция элемента смещается относительно родительского элемента вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left), а так же нарушается порядок отображения элементов. Элементы, следующие за ним располагаются так, словно его нет на странице.

fixed

Расположение элемента нарушает обычный порядок так же, как при значении absolute, но его позиция зафиксирована относительно границы окна браузера и поэтому элемент не прокручивается вместе с остальным контентом страницы. Позиция элемента смещается вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left)

inherit

Заимствует значение у родительского элемента.

<!–[if IE]>
Если верить условным комментариям это – Internet Explorer<br />
<![endif]–>
#
<!–[if IE 5]>
Если верить условным комментариям это – Internet Explorer 5<br />
<![endif]–>
#
<!–[if IE 5.0]>
Если верить условным комментариям это – Internet Explorer 5.0<br />
<![endif]–>
#
<!–[if IE 5.5]>
Если верить условным комментариям это – Internet Explorer 5.5<br />
<![endif]–>
#
<!–[if IE 6]>
Если верить условным комментариям это – Internet Explorer 6<br />
<![endif]–>
#
<!–[if IE 7]>
Если верить условным комментариям это – Internet Explorer 7<br />
<![endif]–>
#
<!–[if gte IE 5]>
Если верить условным комментариям это – Internet Explorer 5 и выше<br />
<![endif]–>
#
<!–[if lt IE 6]>
Если верить условным комментариям это – Internet Explorer меньше чем 6<br />
<![endif]–>
#
<!–[if lte IE 5.5]>
Если верить условным комментариям это – Internet Explorer меньше или эквивалентен 5.5<br />
<![endif]–>
#
<!–[if gt IE 6]>
Если верить условным комментариям это – Internet Explorer больше чем 6<br />
<![endif]–>

* несемантические элементы при верстке,
* дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета и размера (в лучшем случае уголки группируются по 4 в одном изображении),
* не лучший вид страницы, если у пользователя отключена загрузка изображений (особенно если используются img, а не свойство background).

Так и преимущества:

* можно закруглять, что угодно и как угодно.

Но во многих случаях, можно избежать использования изображений. Метод, который я хочу предложить, не оригинален и возможно многим известен, для его работы требуется только HTML и CSS.

Для начала, нужно определиться с помощью какого тега будем делать скругляющие блоки. В оригинале используется устаревший тег b, вероятно выбор пал на него по причине краткости написания, имеющей для нас большое значение, так как его придется часто повторять.

Разметка будет достаточно простой:
<div id="rounded-box-3″><strong> </strong><strong> </strong><strong></strong>
<div>
<h3>Элемент с закругленными углами R=3px</h3>
Этот способ закругления углов подсмотрен на GMail.

</div>
<strong></strong><strong></strong><strong></strong>

</div>
Дальше все просто, делаем b блочным элементом высотой 1px и задаем ему соответствующие поля.

.r1, .r2, .r3 {
display: block;
height: 1px;
}

.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

Затем указываем цвет фона и отступы

#rounded-box-3 .inner-box, #rounded-box-3  b {
background-color: #CCCCCC;
}

.inner-box {
padding:1em;
}

Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение. Пустые блоки, для которых задана высота 1px, растягиваются до 2px, что не способствует закруглению уголков, решить проблему можно указав overflow:hidden

Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7, добавим правило font-size:1px

.r1, .r2, .r3 {
overflow: hidden;
font-size:1px;
}

Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.