Flex - Customize scrollbar used inside component with CSS

Question

what I'm trying to do is customize the look of the scrollbar ONLY when is displayed inside a particular component. I don't want to change the look of all the other scrollbars of my application.

I have a Panel, inside that panel there's a VBox and the scrollbar appears inside that vbox, and I want to stylize only that scrollbar using CSS.

I tried adding something like this in my component (a test just to remove the up and down arrows of the 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 is a warning that says:

CSS type selectors are not supported in components: 'spark.components.Scroller'

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

EDIT: I'm adding an example of my code with a 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" is the one in which I want my customized scrollbar to appear.

In that vBox are added at runtime several components which may cause the scrollbar to appear.

How I should apply my "noArrowsScroller" class selector to it?

EDIT 2: After Sunil comments I tried putting a Scroller component wrapping a VGroup container and using a class selector called "noArrowsScrollbar" but the scrollbar style remains the same. I tried setting also the color in my class selector and THAT property works, so maybe I'm using the 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; i < 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

Answer 1

CSS type selectors are not allowed in components.. All you can do is: use class selector instead or Try putting it in a root level CSS in MXML.

Answer 2

Now that you're using the Scroller and VGroup, you just need to fix the syntax you're using to unset/remove elements:

Try this out:

.noArrowsScroller
{
        down-arrow-skin: ClassReference(null);
        up-arrow-skin: ClassReference(null);
}