How do you remove the border of a Flex 4 TextArea

Question

With the Flex 3 SDK you simply needed to set the borderThickness style to 0, or set borderStyle to none. With the Flex 4 SDK ad the Spark theme, this has no effect.

Answer 1

well i have tried the above code but it does not work for me Flex Hero SDK 4.5, so what i did i selected the textArea and created a new custom skin and change the border alpha to 0.

<!-- border/fill --> 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>            
        </s:stroke>
        <s:fill>
            <s:SolidColor color="#FFFFFF"/>
        </s:fill>
    </s:Rect>

simple and sweet

Answer 2

If you want to remove the border from spark TextArea's here are some ways to do so: To make all spark TextAreas have no border you can do this:

s|TextArea {
  borderVisible : false;
}

You can also make a simple style and only apply them to specific spark TextAreas like so:

.noBorder {
  borderVisible : false;
}
...
<s:TextArea styleName="noBorder"/>

You can turn it off via creation complete like so:

<s:Application ...
  creationComplete="onCreationComplete()"/>
...
private function onCreationComplete() : void {
  mySparkTextArea.setStyle('borderVisible', false);
}
...
<s:TextArea id="mySparkTextArea"/>
</s:Application>

Finally, you can make a skin, per DrMaxmAd's suggestion, like so:

...
<!-- border/fill --> 
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>            
    </s:stroke>
    <s:fill>
        <s:SolidColor color="#FFFFFF"/>
    </s:fill>
</s:Rect>
...

Answer 3

In Flex 3: The border for TextArea component can be controlled by using these two attributes/properties:

• borderSkin="{null}"
• focusAlpha="0"

Focus alpha ensures that you don't get the border showing up even when the TextArea is selected.

Answer 4

You have to set the borderSkin to null

<mx:TextArea borderSkin={null} />

Answer 5

Try something like:

borderVisible="false"

Answer 6

I haven't dabbled in Flash Builder 4 yet, but I know in Flex 3 you can modify things like this (when its not possible another way):

var tb:TextInput = new TextInput();
tb.getChildAt(0).setStyle(...);

Might want to give this a try, you just need to find the correct child element usually.

EDIT: Here's your answer