Стилизуем скроллбары в Google Chrome

Наверное, многих дизайнеров бесят серые дефолтные скроллбары, которые к тому же имеют обыкновение вклиниваться между фреймом разговора и списком посетителей. Но немногие знают про псевдоселектор ::-webkit-scrollbar, позволяющий задать стиль скроллбаров. Работает оно в Google Chrome и Сафари, но учитывая, что Хром используют 40% посетителей (по статистике сервиса "редактор кнопок") - оно того стоит, если не влом, конечно же)

1) Открываем нужный дизайн. Там выбираем фрейм "Дизайн окна сообщений". Внизу находим Поьзовательские стили, их несколько, но все они равносильны, возьмём к примеру пользовательские стили 2.
2) Нажимаем на любой не занятый стиль. Там пишем селектор:Назначаем ему фон #000000 (черный)
Обязательно назначаем ширину и высоту в пикселях, например 12px и 12px
3) Выбираем ещё один незанятый стиль (например, следующий по счёту). Пишем ему селектор:Этот стиль будет применяться к фону полосы прокрутки.
Выбираем для него фон: #090909 (едва заметный серый, к примеру)
По желанию можно к примеру скруглить углы, в общем, смотрите сами, вы дизайнер.
4) Назначаем стиль вертикального бегунка. Для этого создаём ещё один селектор:Выбираем для него фон. Я выбрал градиент, но так как август не позволяет их задавать напрямую, пишем его в поле "дополнительные параметры":Ставим рамку 1px, стиль рамки solid, цвета #444444, #111111, #111111, #444444
5) Теперь то же самое делаем и для горизонтальной полосы прокрутки. Создаём селектор:Рамку ставим такую же, как на прошлом шаге, в дополнительные параметры пишем:Обратите внимание, что я заменил left на top, потому что изменил направление градиента. Если вы желаете сделать одинаковый стиль для горизонтальной и вертикальной полосы, достаточно один стиль "::-webkit-scrollbar-thumb", без :vertical и :horizontal. Точно также и наоборот, если хотите стилизовать ::-webkit-scrollbar-track для разных направлений по-разному - можете его разбить на :vertical и :hotizontal.
6) Теперь осталось стилизовать уголок между вертикальной и горизонтальной полосой прокрутки (если есть горизонтальная). Создаём ещё один селектор:Назначаем ему фон #000000 либо такой же, как у ::-webkit-scrollbar-track (по желанию).
7) Сохраняем. Проделываем эти же 6 шагов для остальных фреймов, например для фрейма "Список посетителей".

После этого открываем чат в Хроме и глядим, какие у нас стали полосы прокрутки. Значительно красивее бездушных белых. Если в чате много дизайнов, а у вас много свободного времени - проделываем ту же процедуру и для остальных дизайнов) Также можно эксперментировать с различными стилями, и даже использовать изображения в качестве фона элементов скроллбара (заливать на хост и прописывать через доп.параметры стиля, но БЕЗ КАВЫЧЕК, август их экранирует). Картинки выкладывать не буду, кто сделает к уроку иллюстрации в виде картинок - буду благодарен.
В данном уроке не касался такой темы как стрелки по краям скроллбара, но если хотите оформить их, вот вам селекторы:

спойлер

::-webkit-scrollbar-button:vertical:start:decrement (вертикальный верхний)
::-webkit-scrollbar-button:vertical:end:increment (вертикальный нижний)
::-webkit-scrollbar-button:horizontal:start:decrement (горизонтальный верхний)
::-webkit-scrollbar-button:horizontal:end:increment (горизонтальный нижний)
Обратите внимание, чтобы они заработали, нужно не забыть прописать им высоту/ширину, а также добавить дополнительный параметр "display: block;"

Ну а выглядят примерно так: http://jsfiddle.net/PUA5S/

Почему только Google Chrome? Все современные вебкитовские браузеры поддерживают стилизацию скролла (Maxthon, Safari, даже новый Яндекс Браузер).

Пижон: Почему только Google Chrome? Все современные вебкитовские браузеры поддерживают стилизацию скролла (Maxthon, Safari, даже новый Яндекс Браузер).

Сафари упомянул же, а всяческие форки Хрома думаю нет смысла отдельно перечислять, очевидно что они поддерживают то же самое, что и Хром)