[ACCEPTED]-iPhone UITextField background color-background-color

Accepted answer
Score: 36

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

You can then 6 easily change the background colour with 5

textField.backgroundColor = backgroundColor;

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

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

#import <QuartzCore/QuartzCore.h>

and then set

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

for this feature to work

Score: 15

colored UITextField using overlay

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

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

#import <QuartzCore/QuartzCore.h>

colorizeOverlayView.layer.cornerRadius = 6.0f;
colorizeOverlayView.layer.masksToBounds = YES;
Score: 5

This is much easier than we all thought.

When 5 setting the backgroundColor using colorWithRed:green:blue:, the 4 colors should be floats and should be a 3 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 2 styles appear to work when you do this.

Also 1 see: background color not working as expected

Score: 4

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

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

Fiddling with 3 the UIImageViews doesn't change much.

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

Score: 3

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

To elaborate on his solution, yo 5 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 4 rounded rect text field you are trying change 3 the background color for. Do the above and 2 you will get Jacob's bluish text field along 1 with the appropriate shadows.

Score: 1

You can do this:

textField.backgroundColor = [UIColor whiteColor];

In this case I'm doing it 2 with white color but you can do it with 1 another color for uiColor.

Hopes it helps

Score: 0

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

enter image description here

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

enter image description here

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),
 ])

More Related questions