iPhone UITextField background color

Question

I am unable to control the background color of a UITextField with a borderStyle= UITextBorderStyleRoundedRect. With this border style the backgroundColor property only seems to control a very narrow line along the inner edge of the rounded rectangle. The rest of the field remains white.

However, if the borderStyle is set to UIBorderStyle=UITextBorderStyleBezel then the entire background of the UITextField is controlled by its backgroundColor property.

Is this a feature? Is there a way to control the backgroundColor of a UITextField with a borderStyle=UITextBorderStyleRoundedRect?

Swayder

Answer 1

To change the background color in a UITextField you first need to use a different style of text field to the "rounded" style (such as the "no border" style) either in Interface Builder or programmatically.

You can then easily change the background colour with

textField.backgroundColor = backgroundColor;

where textField is your UITextField, and backgroundColor is a UIColor.

As a further tip- if you wish to restore the rounded corners appearance, you will first need to

#import <QuartzCore/QuartzCore.h>

and then set

textField.layer.cornerRadius=8.0f;
textField.layer.masksToBounds=YES

for this feature to work

Magnesite

Keep in mind that manipulating the layer of a view can dramatically reduce performance when that view is drawing multiple times in a table view. – Tallula

Answer 2

The other answers don't have the shadows present on a UITextField with Rounded Rectangle style. After trying many options I finally just placed a UIView over the UITextField, with an identical frame and auto resize mask, set the alpha to 0.3, and set the background to a blue color. Then I used the snippet from Peter Johnson's answer to clip the rounded edges off the colored overlay view. Also, uncheck the 'User Interaction Enabled' checkbox in IB to allow touch events to cascade down to the UITextField underneath. Looks perfect now.

Side effect: your text will also be colorized (doesn't matter if it's black)

#import <QuartzCore/QuartzCore.h>

colorizeOverlayView.layer.cornerRadius = 6.0f;
colorizeOverlayView.layer.masksToBounds = YES;

Torres

Answer 3

This is much easier than we all thought.

When setting the backgroundColor using colorWithRed:green:blue:, the colors should be floats and should be a fraction of 1. For example:

[myTextField setBackgroundColor:[UIColor colorWithRed:255.0f/255.0f green:110.0f/255.0f blue:110.0f/255.0f alpha:1];

All TextField styles appear to work when you do this.

Also see: background color not working as expected

Christen

This is not the issue. UITextField does not honor background color when using a border. – Screenplay

Answer 4

A dump of the view hierarchy reveals that the UITextField has a single subview of type UITextFieldRoundedRectBackgroundView, which in turn has 12 UIImageViews.

An older article by Erica Sadun shows an additional UILabel, which Apple apparently removed in later versions of the SDK.

Fiddling with the UIImageViews doesn't change much.

So the answer is: there's probably no way to change the background color.

Pola

Answer 5

Jacob's answer was the best answer here since it allows you to keep the shadows underneath the RoundedRect text boxes, so +1 for Jacob!

To elaborate on his solution, yo need to do this:

    UIView *textFieldShadeView=[[UIView alloc] init];
[textFieldShadeView setFrame:myTextFiled.frame];
textFieldShadeView.layer.cornerRadius=8.0f;
textFieldShadeView.layer.masksToBounds=YES;
textFieldShadeView.backgroundColor=[UIColor blueColor];
textFieldShadeView.alpha=0.3;
textFieldShadeView.userInteractionEnabled=NO;
[self.view addSubview:textFieldShadeView];
[textFieldShadeView release];

Where myTextFiled is the rounded rect text field you are trying change the background color for. Do the above and you will get Jacob's bluish text field along with the appropriate shadows.

Derogate

Thanks for putting it all together. One refinement is to add the colorized view as a subview of the textfield (framed with an origin of 0), rather than of the container view. This way, you can enumerate through the container's subviews without extra junk, and if you do any custom reframing during autorotation, everything rides together. You might also want to set the added view's autoresizing mask to UIViewAutoresizingFlexibleWidth, the only option that will matter. – Kef

Answer 6

When I encountered this problem, my approach was to set the background of my UITextField to clear and embed it within a larger UI View, which has the color and border that I desire. The following swift code does that. With this code, you can set the background color of the container view to whatever you want. For example, if you set the textContainer background color to yellow, it would look like this (though I wouldn't actually recommend this shade, it is just for example purposes):

If you show view frames in the Xcode debugger (image below) you see that the actual text field is a smaller rectangle inside what appears to be the text field (but is actually the container view). Note that Apple actually takes this same approach in the UIAlertController.

let field = UITextField()
field.font = UIFont.systemFont(ofSize: 13, weight: .regular)
field.backgroundColor = .clear

let textContainer = UIView()
textContainer.addSubview(field)
textContainer.isUserInteractionEnabled = true
textContainer.backgroundColor = .yellow
textContainer.layer.masksToBounds = true
textContainer.layer.borderWidth = 0.25
textContainer.layer.borderColor = myBorderColor
textContainer.layer.cornerRadius = 7.0
    
NSLayoutConstraint.activate([
    textContainer.heightAnchor.constraint(equalToConstant: 30.67),
    field.centerYAnchor.constraint(equalTo: textContainer.centerYAnchor),
    field.trailingAnchor.constraint(equalTo: textContainer.trailingAnchor, constant: -7.0),
    field.leadingAnchor.constraint(equalTo: textContainer.leadingAnchor, constant: 7.0),
 ])

Trachoma