Ничего так не выйдет, потому что полосы прокрутки не являются как таковыми элементами страницы.
Но можно с помощью JS замутить свои полосы, с блекджеком и остальным.

Самодельная полоса прокрутки сам по себе сложный элемент, вычисление размеров ползунка относительно прокручиваемого контента, управление кнопками вниз/вверх, drag&drop самого ползунка и привязка к прокрутке контента, + колёсико мыши и т.д. и т.п.

Можете поискать готовые библиотеки скриптов, вероятно попадётся что-нибудь.

А обычная полоса прокрутки - элемент браузера и часто неподдаётся изменениям.

да я пытался уже готовую прикрутить которую взяли из модуля skrollbar для joomla, но все равно ничего не вышло . В нем таблица css выглядит так:

/* © 2007 YOOtheme.com */

div.blank-h div.yoo-scroller {
}

/* panel */
div.blank-h div.yoo-scroller .panel-container {
padding: 0px 0px 10px 0px;
}

div.blank-h div.yoo-scroller .panel-container-bg {
overflow: hidden;
}

div.blank-h div.yoo-scroller div.panel {
overflow: hidden;
}

div.blank-h div.yoo-scroller div.panel div.slide {
float: left;
overflow: hidden;
}

div.blank-h div.yoo-scroller div.scrollarea {
margin: 0px 20px 0px 20px;
background: url(styles/blank-h/images/scrollarea_m.png) 0 0 repeat-x;
cursor: pointer;
}

div.blank-h div.yoo-scroller div.scrollarea-l {
background: url(styles/blank-h/images/scrollarea_l.png) 0 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollarea-r {
background: url(styles/blank-h/images/scrollarea_r.png) 100% 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollbar {
float: left;
}

div.blank-h div.yoo-scroller div.scrollknob {
margin: 2px 0px 2px 0px;
min-width: 10px;
background: url(styles/blank-h/images/scrollknob_l.png) 0 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollknob-r {
padding: 0px 10px 0px 10px;
background: url(styles/blank-h/images/scrollknob_r.png) 100% 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollknob-m {
height: 14px;
background: url(styles/blank-h/images/scrollknob_m.png) 0 0 repeat-x;
}

div.blank-h div.yoo-scroller div.forward, div.blank-h div.yoo-scroller div.back {
width: 21px;
height: 18px;
float: left;
}

div.blank-h div.yoo-scroller div.forward {
background: url(styles/blank-h/images/scroll_forward.png) 0 0 no-repeat;
}

div.blank-h div.yoo-scroller div.back {
background: url(styles/blank-h/images/scroll_back.png) 0 0 no-repeat;
}

Может ее как то можно прикрутить к моей таблице стилей? Если кому интересно полностью этот скрипт с файлами в прикрепленном архиве.

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.