Make disabled Flex Spark Button more readable using CSS

Question

I have a Flex Spark Button that I've changed the background to a dark color using

s|Button {
    color: #66ffff;
    chromeColor: #333333;
}

The problem is that when the button is disabled, it's very hard to read (the text color and background color are very close). I've tried setting the disabled color to something lighter

s|Button:disabled {
    color: #ffffff;
}

But the disabled text's color is not #ffffff. It's some combination of the text color and the background. Is there someway to disable this behavior (ie, specify the exact disabled state's text color)?

Answer 1

You are battling with the default skin of the button. If you were to create a new button skin based on ButtonSkin, you would see that the alpha for the entire skin is set: alpha.disabled="0.5".

Setting the value to 1.0 solves your problem, but it seems overkill to define this entire skin just to modify this single value.

Hopefully, there is a more elegant way. I tried setting alpha: 1.0; in the disabled style, but it doesn't take. The only thing I have been able to do is create a new button style, set alpha.disabled="1.0" and telling the button to use that slightly modified style.

Answer 2

You can create 2 .css files, one for the standard view and one for the "disabled" view and set your own button properties. Write a function which changes the .css file to use.