I’m currently working on skinning an Flex Application, and I ran in some strange CSS behavior. When you skin a datechooser component and set some styles with CSS like this:

DateChooser{
	rollOverIndicatorSkin: Embed(source="/assets/skin/flex_skins2.swf", symbol="DateChooser_rollOverIndicatorSkin");
	selectionIndicatorSkin: Embed(source="/assets/skin/flex_skins2.swf", symbol="DateChooser_selectionIndicatorSkin");
	headerColors: #333333, #000000;
   	backgroundColor: #474747;
   	color: #a7a7a7;
   	headerStyleName: "mydateChooserHeaderStyle";
}
 
.mydateChooserHeaderStyle {
   color: #a7a7a7;
}

and insert a datefield, not all styles are applied to the build-in datechooser of the datefield (for instance, the background-color, it just stays white).

The solution to this problem is to use the date-chooser-style-name property of the datefield. You then can specify a classname for the datechooser. The problem with this solution is that you get two classes, specifying the same component.

But then I thought wait… It’s CSS right? So I can specify styles for multiple classes or containers, like this:

DateChooser, .date-chooser{
	/* code here */
}
 
DateField{
	date-chooser-style-name: "date-chooser";
}