Question

I have a style sheet in my Flex Application, referenced as:

<mx:Style source='/assets/stylesheets/default.css' /> 

In this style sheet, I set dropShadowEnabled to true gloablly:

global {     fontSize: 11pt;     dropShadowEnabled: true;     verticalAlign: 'middle'; } 

This gives a drop shadow to many components, including all TextInputs.

However, I have a Title Window component that displays an editable ComboBox and I don’t want that Text Input to have a drop shadow. I can’t get it to go away however. I’ve tried the following:

Creating a CSS class selector…

<mx:ComboBox editable='true' dataProvider='{nameOptions}' textInputStyleName='noDropShadow' /> 

…in the default CSS:

.noDropShadow {     dropShadowEnabled: false; } 

…in the Title Window:

<mx:Style>     .noDropShadow {         dropShadowEnabled: false;     } </mx:Style> 

…also:

<mx:Style>     TextInput.noDropShadow {         dropShadowEnabled: false;     } </mx:Style> 

None of these removed the drop shadow. What am I missing here?

Answer 1

One solution would be to remove ‘dropShadowEnabled: true;’ from the global style and put it only on the items you specifically want drop shadow.