How can I remove drop shadow from TextInput?

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.

Answer 2

Give your combo-box an id attribute and then:

combo_box_id.setStyle( "dropShadowEnabled", false );

In your <mx:Script/> block.