1 Reply Latest reply on Nov 8, 2007 3:26 AM by joan_lafferty

    CSS for buttons being applied to scrollbars


      I am working with the Flexbuilder 3 app. I created some CSS styles to apply to buttons in my app. The CSS style selector is button. However, when I compile my MXML file, the style is also being applied to any scrollbars on the page. Is this a bug or is there some other selector I should use?

      Here is the CSS:

      Button {
      cornerRadius: 10;
      paddingLeft: 16;
      paddingRight: 16;
      paddingTop: 3;
      paddingBottom: 5;
      letterSpacing: 0;
      fillAlphas: 0.9, 0.7, 1, 1;
      fillColors: #ff0000, #000000, #0066ff, #eeeeee;
      color: #ffffff;
      textRollOverColor: #000099;
      fontFamily: Verdana;
      fontSize: 11;
      fontWeight: bold;


      After compiling he CSS into a SWF file, I include the CSS with the command:
      initialize = "StyleManager.loadStyleDeclarations( 'mystyle.swf' )"

      This results in all buttons on the page being styled red fading into black -- which is what I want. However, if any element expands and requires a scrollbar, the entire scrollbar picks up the button class style. This produces a scrollbar the is bright red at the top and fades into black on the bottom. That looks good on the buttons, but looks dreadful on the scrollbar.

      Why is this happening? What selector do I use to target only the button controls?

      Tom Bonner
        • 1. Re: CSS for buttons being applied to scrollbars
          joan_lafferty Adobe Employee
          The buttons on a ScrollBar are indeed derived from the Button class, so, they inherit everything that you assign to Button. I think it is the fillColors causing the problem. You can add another class selector like:

          ScrollBar {
          fillColors: #FFFFFF, #E7E7E7;

          The ScrollBars will go back to looking more normal. You might have to play around a bit more with the styles if I am missing something.

          This isn't a bug though. HTH.