Flex - Customize scrollbar used inside component with CSS -

what i'm trying customize of scrollbar when displayed inside particular component. don't want change of other scrollbars of application.

i have panel, inside panel there's vbox , scrollbar appears inside vbox, , want stylize scrollbar using css.

i tried adding in component (a test remove , down arrows of scroller):

<fx:style>     @namespace s "library://ns.adobe.com/flex/spark";      s|scroller     {     up-arrow-skin: classreference("undefined");     down-arrow-skin: classreference("undefined");     }  </fx:style> 

the result warning says:

css type selectors not supported in components: 'spark.components.scroller' 

i searched , found out should use class selectors instead of type selectors inside component, don't want create custom scrollbars (how should use that?).

edit: i'm adding example of code test of css class selector:

<fx:style>     @namespace s "library://ns.adobe.com/flex/spark";     @namespace mx "library://ns.adobe.com/flex/mx";      .noarrowsscroller     {     up-arrow-skin: classreference("undefined");     down-arrow-skin: classreference("undefined");     }   </fx:style>  <fx:declarations>     <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations>  <mx:vbox width="100%" height="100%" paddingbottom="20" paddingleft="20" paddingright="20" paddingtop="20"          horizontalalign="center" verticalalign="middle">       <s:bordercontainer borderweight="1" width="100%" height="100%" bordercolor="0x79a8bd">         <mx:vbox width="100%" height="100%" id="generalvbox" horizontalalign="center"                  minheight="0" horizontalscrollpolicy="off">          </mx:vbox>     </s:bordercontainer> </mx:vbox>   

the vbox "generalvbox" 1 in want customized scrollbar appear.

in vbox added @ runtime several components may cause scrollbar appear.

how should apply "noarrowsscroller" class selector it?

edit 2: after sunil comments tried putting scroller component wrapping vgroup container , using class selector called "noarrowsscrollbar" scrollbar style remains same. tried setting color in class selector , property works, maybe i'm using wrong css properties?

<?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009"             xmlns:s="library://ns.adobe.com/flex/spark"             xmlns:mx="library://ns.adobe.com/flex/mx" width="100%"     height="100%"            creationcomplete="application1_creationcompletehandler(event)">  <fx:script>     <![cdata[         import mx.controls.label;         import mx.controls.linkbutton;         import mx.events.flexevent;            protected function application1_creationcompletehandler(event:flexevent):void         {             if(v != null)             {                 for(var i:int = 0; < 100; i++)                 {                     var lbl:label = new label();                     lbl.text = string(i);                      v2.addelement(lbl);                 }             }         }      ]]> </fx:script>  <fx:style>     @namespace s "library://ns.adobe.com/flex/spark";     @namespace mx "library://ns.adobe.com/flex/mx";      .noarrowsscroller     {         down-arrow-skin: classreference("undefined");         up-arrow-skin: classreference("undefined");         color: red;     }   </fx:style>  <fx:declarations>     <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations>    <s:panel width="50%" height="50%">     <s:scroller stylename="noarrowsscroller"                  focusenabled="false"                  hasfocusablechildren="true"                   height="100%"                  horizontalcenter="0" verticalcenter="0">         <s:vgroup width="100%" height="100%" id="v2" minheight="0">          </s:vgroup>     </s:scroller> </s:panel> 

thanks

css type selectors not allowed in components.. can is: use class selector instead or try putting in root level css in mxml.