If you ever tried to remove the border from text input components such as TextInput or DateField you will find that whatever you do you cannot remove a line that look like a border from your top border. Anything you try such as:

dropShadowColor : “0xFFFFFF”;
dropShadowEnabled : “false”;
border-thickness-bottom : 0;
border-thickness-top : 0;
border-thickness-left : 0;
border-thickness-right : 0;

Or directly on the component such as;

borderColor=”white” borderThickness=”0″

You just can’t get the fu#$%$ borders off! The reason is that flex assign a border skin: borderSkin=”mx.skins.halo.HaloBorder” which will always going to leave a line on the top corner.

The solution is actually simple; create a skin and don’t draw anything leaving the skin borders empty, that will remove the borders, shadows etc;

package com.skins
{
import mx.skins.Border;

public class TextInputBorderlessSkin extends Border
{
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
}
}
}

Now you can assign the skin in your CSS to your component text input;



.BorderlessTextInput {
    border-skin: ClassReference(”com.skins.TextInputBorderlessSkin”);
}

Play around with skins in Flex, you’ll have a lot of fun!