I need help styling FormItem components in Flex.

Question

I have a form that I would like to style. specifcally I would like to chnage the background color of the form item's label. (the backgorundColor attribute changes both the label and the inputs background color)

i.e.

<mx:Form>
    <mx:FormItem label="username:">
        <mx:TextInput />
    </mx:FormItem>
</mx:Form>

I would like to make the label with 'username:' have a different background color, but have the text input still be the default background color.

is this possible with a FormItem ?

Answer 1

Try using the flex style explorers to create your desired style:

• Flex 3 Style Explorer

• Flex 2 Style Explorer

I used the TextArea in the style explorer and formatted the background color which gave the following css output:

TextArea {
   backgroundColor: #0000ff;
}

You can change this to the following to include in you stylesheet:

.formLabel {
   backgroundColor: #0000ff;
}

Then in the FormItem tag:

<FormItem label="Label" styleName="formLabel" />

More info on Flex Style Sheets: Flex Style Sheets

These examples will show that you can declare styles within the mxml Style tags rather than an external style sheet if you would like.

Answer 2

A formitem has an object it uses to display the label called the FormItemLabel, this objects purpose is so you can style the label of a form item.

In flex 2 to change the style you can try:

FormItemLabel {

}

However I looked over the flex 2 lang ref and it doesn't seem like you can change the background color of the label. Click here for lang ref link

If you are using flex 3 the desired way to change the label of the FormItem is through the formitems labelStyleName

FormItem {
  labelStyleName: newStyle;
}

However once again I don't believe they added the ability to change the background color of the label itself. Click here for lang ref link

Best choice of action if this is required would be to extend the formitem class, unless anyone else has any ideas.

Hope this helps...