Remove border outline on text field when using UITextBorderStyle.RoundedRect

Question

I am creating a text field with a semi-transparent background color (40% white) on which I am using UITextBorderStyle.RoundedRect for the rounded corners and text insets. This automatically sets a grey-ish border outline which I want to remove, but I can't find how.

I have tried the following:

• Set the layer.borderWidth to 0: No effect
• Set the layer.borderColor to clearColor: No effect
• Set the layer.borderColor to the same color as the background, but this seems to creates an additional border (40% white) which is drawn on top of the previous (grey-ish) one.

I'm sure there must be an easy way to do this, but I can't find it.

Answer 1

If you set UITextBorderStyle.RoundedRect for the text field then the text field will add an image to the background of the text field with a grey border. That's why layer properties are not working becuase the border you are seeing is not on layer its an image added to text field.

You can verify it by debugging with the View Hierarchy. There will be an image added to the text field. The image will be created with the background color of the text field with a grey border and capInsets to avoid border stretch.

So your best bet is to set the text field to UITextBorderStyle.none. Then create border by yourself.

Answer 2

If you want to just round the corners of textfield use

YourTextField.layer.cornerRadius = 8 //or any value you want to set

Answer 3

I think the only way you can achieve this is by setting the border style to .none (and round the corners yourself). Then you can set the border style and colour the way you want it (or have no border at all).