Cannot change search bar background color

Question

I have a search bar:

let searchBar:UISearchBar = UISearchBar(frame: CGRectMake((searchView.frame.width - UIScreen.mainScreen().bounds.width / 1.6) / 2, 0, UIScreen.mainScreen().bounds.width / 1.6, 24))

and I want to change text input part background color. For this I've tried:

searchBar.barTintColor = UIColor(red: 0/255, green: 74/255, blue: 103/255, alpha: 1)

searchBar.backgroundColor = UIColor.redColor()

but these both variants do not work. How can I change background color of my UISearchBar textInput part and what I did wrong?

I wanted to change the color *around* the rounded textField and tried all of the solutions below :D but it's just the `barTintColor` property that you tried above. Make sure to set `isTranslucent` to `false` in code or storyboard. — heyfrank, May 23 '18 at 15:49

score 22 · Answer 1 · edited Jun 20 '20 at 09:12

Like @aliamcami, all the answers before did not work as I would expect, either the answer did not work for me or it works but it needs too much "dummy" code. So I share another answer wrote in Swift 4 with simplified logic:

for textField in searchController.searchBar.subviews.first!.subviews where textField is UITextField {
    textField.subviews.first?.backgroundColor = .white
    textField.subviews.first?.layer.cornerRadius = 10.5 //I set 10.5 because is approximately the system value
    textField.subviews.first?.layer.masksToBounds = true
    //Continue changing more properties...
}

textField.subviews.first is the "_UISearchBarSearchFieldBackgroundView" subview which add visual effects behind the UIFieldEditor.

Edited

After some development and many bugs, I finished with this elegant solution (that I am sure Apple would not be happy to approve, but I do not know) that works from iOS 10 to iOS 12:

if let textField = searchBar.value(forKey: "searchField") as? UITextField {
    textField.backgroundColor = myColor
    //textField.font = myFont
    //textField.textColor = myTextColor
    //textField.tintColor = myTintColor
    // And so on...
    
    let backgroundView = textField.subviews.first
    if #available(iOS 11.0, *) { // If `searchController` is in `navigationItem`
        backgroundView?.backgroundColor = UIColor.white.withAlphaComponent(0.3) //Or any transparent color that matches with the `navigationBar color`
        backgroundView?.subviews.forEach({ $0.removeFromSuperview() }) // Fixes an UI bug when searchBar appears or hides when scrolling
    }
    backgroundView?.layer.cornerRadius = 10.5
    backgroundView?.layer.masksToBounds = true
    //Continue changing more properties...
}

When the searchBar is in the tableHeaderView the above code can be called in viewWillAppear, but if it is in the navigationItem on iOS 11 and above it should be called in viewDidAppear.

the solution provided by @Ángel Téllez worked for me as well! Thanks Angel! Not sure if it will work for IOS 10 also but it works for 11. Also, had one minor UI glitch where for a flash ( under a second ), there is a white line that appears between the navigation header and the search bar controller. Don't know quite why this happens but glad that this works ! — sudhama, Dec 06 '18 at 15:34
Your are welcome, @sudhama. I am glad it works for at least someone :D. I updated my answer after some fixes I done after 3 months. The code works fine for me in iOS 10 and above from iPhone 5 to the XS. About the glitch, maybe could be that your must change the properties of the `searchBar` in `viewWillAppear`? Or maybe you are playing around with the `shadowImage` porperty of the `searchBar` and that cause the line under it reloads? I hope you can solve it :) — Ángel Téllez, Dec 06 '18 at 18:52
In order to avoid the search bar briefly flashing the old color when the search bar is in the `navigationItem`, instead of `viewDidAppear` I found I could put it in `viewDidLayoutSubviews`, after the call to `super`. — Chris Vasselli, Sep 24 '19 at 00:10

score 16 · Answer 2 · answered Nov 17 '15 at 07:44

If you only want to change it in your ViewController and don't want anywhere else to effect then use

for view in searchBar.subviews {
            for subview in view.subviews {
                if subview .isKindOfClass(UITextField) {
                    let textField: UITextField = subview as! UITextField
                    textField.backgroundColor = UIColor.redColor()
                }
            }
        }

But if you want it to be change in whole app and targeting the iOS 9.0 or later then should be using appearanceWhenContainedInInstancesOfClasses like

UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).backgroundColor = UIColor.redColor()

I do not know why, but it still doesn't change the color – Orkhan Alizade Nov 17 '15 at 07:46 — Orkhan Alizade, Nov 17 '15 at 07:46

score 16 · Answer 3 · edited Jun 20 '20 at 09:12

I did one UISearchBar extension & category for customize text filed within search bar.

Compatible from iOS 9 to iOS 13.

Swift 4+

import UIKit

extension UISearchBar {

    // Due to searchTextField property who available iOS 13 only, extend this property for iOS 13 previous version compatibility
    var compatibleSearchTextField: UITextField {
        guard #available(iOS 13.0, *) else { return legacySearchField }
        return self.searchTextField
    }

    private var legacySearchField: UITextField {
        if let textField = self.subviews.first?.subviews.last as? UITextField {
            // Xcode 11 previous environment
            return textField
        } else if let textField = self.value(forKey: "searchField") as? UITextField {
            // Xcode 11 run in iOS 13 previous devices
            return textField
        } else {
            // exception condition or error handler in here
            return UITextField()
        }
    }
}

Usage Example:

var searchController: UISearchController?
searchController?.searchBar.compatibleSearchTextField.textColor = UIColor.XXX
searchController?.searchBar.compatibleSearchTextField.backgroundColor = UIColor.XXX

Objective-C

UISearchBar+SearchTextField.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface UISearchBar (SearchTextField)

// Due to searchTextField property who available iOS 13 only, extend this property for iOS 13 previous version compatibility
@property (nonatomic, readonly) UITextField *compatibleSearchTextField;

@end

NS_ASSUME_NONNULL_END

UISearchBar+SearchTextField.m

#import "UISearchBar+SearchTextField.h"

@implementation UISearchBar (SearchTextField)

- (UITextField *)compatibleSearchTextField {
    if (@available(iOS 13.0, *)) {
#ifdef __IPHONE_13_0
        return self.searchTextField;
#else
        // Xcode 11 run in iOS 13 previous devices
        return (UITextField *)[self valueForKey:@"searchField"];
#endif
    } else {
        // Xcode 11 previous environment
        return [[[self.subviews firstObject] subviews] lastObject];
    }
}

@end

Usage Example:

- (UISearchBar *)searchBar {
    if (!_searchBar) {
        _searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(X, X, X, X)];
        _searchBar.compatibleSearchTextField.textColor = [UIColor XXX];
        _searchBar.compatibleSearchTextField.backgroundColor = [UIColor XXX];
    }
    return _searchBar
}

score 12 · Answer 4 · answered Nov 14 '19 at 02:18

12

Swift 5:

    searchController.searchBar.searchTextField.backgroundColor = .white

answered Nov 14 '19 at 02:18

Joshua Hart

772
1
21
31

2

This should be the accepted answer. 1 line and worked perfectly and as expected. Nothing fancy and no workarounds. The best answer on this thread – Julian Silvestri Nov 22 '19 at 15:50
3

This will crash under iOS 12.x which is why the other answers are more appropriate. – C6Silver Dec 17 '19 at 00:06
2

Using this with iOS 16 with no crashes. – Jevon718 Oct 11 '22 at 15:58

Kirit Modi · Answer 5 · 2018-08-27T06:13:01.750

11

You are adding the below code in ViewDidLoad and Change the textfield background color RED,

for subView in searchBar.subviews
{
    for subView1 in subView.subviews
    {

        if subView1.isKindOfClass(UITextField)
        {
            subView1.backgroundColor = UIColor.redColor()
        }
    }

}

Red Color of TextField in SearchBar.

edited Aug 27 '18 at 06:13

answered Nov 17 '15 at 07:38

Kirit Modi

23,155
15
89
112

I do not know why, but I've tried many solutions and no one works for me =/ – Orkhan Alizade Nov 17 '15 at 07:48
above demo project Download and implement same as demo in your project. – Kirit Modi Nov 17 '15 at 07:49
Un-check "Translucent" in search bar properties than above code will work. – Saqib Omer Apr 10 '16 at 10:44

score 11 · Answer 6 · answered Jan 12 '17 at 08:45

11

The way to do this only using Apple APIs is to create an image and use setSearchFieldBackgroundImage:

self.searchBar.setSearchFieldBackgroundImage(UIImage(named: "SearchFieldBackground"), for: UIControlState.normal)

It will even animate the corners properly if you create a rounded rect and dynamically show and hide buttons.

Example using this image:

answered Jan 12 '17 at 08:45

SuperDuperTango

1,398
1
14
32

This is the same as just setting `backgroundColor` on the `searchBar`. Just unnecessarily complicated and doesn't solve the tint problem, because you can't change the text tint or text field background properly to match the background – Oct 06 '17 at 08:10
2

backgroundColor does not change anything for me – Yaroslav Dukal Mar 01 '18 at 08:51
1

It's not unnecessarily complicated, it's the correct API to use. – Raphael Oliveira Dec 10 '18 at 00:20
i m not able to change navigationItem bg color in ios 12. dsiplaying white all time. working fine in ios13. in my case want set that pink color. – Hitarth Jun 19 '20 at 13:36

Alien · Answer 7 · 2017-03-31T08:50:22.820

For Swift 3+, use this:

for subView in searchController.searchBar.subviews {

    for subViewOne in subView.subviews {

        if let textField = subViewOne as? UITextField {

           subViewOne.backgroundColor = UIColor.red

           //use the code below if you want to change the color of placeholder
           let textFieldInsideUISearchBarLabel = textField.value(forKey: "placeholderLabel") as? UILabel
                textFieldInsideUISearchBarLabel?.textColor = UIColor.blue
        }
     }
}

score 9 · Answer 8 · answered May 15 '17 at 15:01

9

I do it with this way(Swift 3+ solution):

let textFieldInsideSearchBar = searchBar.value(forKey: "searchField") as? UITextField
textFieldInsideSearchBar?.backgroundColor = UIColor.red

answered May 15 '17 at 15:01

Nosov Pavel

1,571
1
18
34

This is the only one that works in Xcode 11. Thanks! – Mikiko Jane Feb 27 '20 at 06:37

score 9 · Answer 9 · edited Nov 07 '19 at 13:17

9

Faced the same issue , for iOS 13+ , textFiled can be get by as follow

var searchText : UITextField?
if #available(iOS 13.0, *) {
   searchText  = searchBar.searchTextField
}
else {
    searchText = searchBar.value(forKey: "_searchField") as? UITextField
}
searchText?.backgroundColor = .red

edited Nov 07 '19 at 13:17

Dharmesh Mansata

4,422
1
27
33

answered Nov 07 '19 at 12:46

guru84

87
1
3

Nice answer. Simple and straight. – Umair_UAS Jan 16 '20 at 08:20

score 9 · Answer 10 · answered Feb 21 '20 at 00:28

Swift 5 extension:

Works perfect on all iOS versions

import UIKit

extension UISearchBar {

    func setupSearchBar(background: UIColor = .white, inputText: UIColor = .black, placeholderText: UIColor = .gray, image: UIColor = .black) {

        self.searchBarStyle = .minimal

        self.barStyle = .default

        // IOS 12 and lower:
        for view in self.subviews {

            for subview in view.subviews {
                if subview is UITextField {
                    if let textField: UITextField = subview as? UITextField {

                        // Background Color
                        textField.backgroundColor = background

                        //   Text Color
                        textField.textColor = inputText

                        //  Placeholder Color
                        textField.attributedPlaceholder = NSAttributedString(string: textField.placeholder ?? "", attributes: [NSAttributedString.Key.foregroundColor : placeholderText])

                        //  Default Image Color
                        if let leftView = textField.leftView as? UIImageView {
                            leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)
                            leftView.tintColor = image
                        }

                        let backgroundView = textField.subviews.first
                        backgroundView?.backgroundColor = background
                        backgroundView?.layer.cornerRadius = 10.5
                        backgroundView?.layer.masksToBounds = true

                    }
                }
            }

        }

        // IOS 13 only:
        if let textField = self.value(forKey: "searchField") as? UITextField {

            // Background Color
            textField.backgroundColor = background

            //   Text Color
            textField.textColor = inputText

            //  Placeholder Color
            textField.attributedPlaceholder = NSAttributedString(string: textField.placeholder ?? "", attributes: [NSAttributedString.Key.foregroundColor : placeholderText])

            //  Default Image Color
            if let leftView = textField.leftView as? UIImageView {
                leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)
                leftView.tintColor = image
            }

        }

    }

}

score 6 · Answer 11 · answered Nov 17 '15 at 08:27

Just like this

let searchBar:UISearchBar = UISearchBar(frame: CGRectMake((searchView.frame.width - UIScreen.mainScreen().bounds.width / 1.6) / 2, 0, UIScreen.mainScreen().bounds.width / 1.6, 24))
let searchTextField = searchBar.valueForKey("_searchField") as? UITextField
searchTextField?.backgroundColor = UIColor.redColor()

Sudarshan Sreeram · Answer 12 · 2019-07-20T22:09:57.180

I was experimenting with the properties of searchBar and searchTextField when I found a solution to the above.

Below, I have listed the steps in order to achieve the desired result:

Set the border style of the searchTextField to .none
Set the background color of the searchTextField to your desired color
Change the corner radius of the searchTextField's layer to 10
Set the searchTextField's clipToBounds property to true

Further, I have provided the code below for your reference:

 let searchController = UISearchController(searchResultsController: nil)
 navigationItem.searchController = searchController

 searchController.searchBar.barTintColor = viewBackgroundColor
 searchController.searchBar.backgroundColor = viewBackgroundColor

 searchController.searchBar.searchTextField.borderStyle = .none
 searchController.searchBar.searchTextField.backgroundColor = .white
 searchController.searchBar.searchTextField.layer.cornerRadius = 10
 searchController.searchBar.searchTextField.clipsToBounds = true

Note: searchTextField is in Beta and available on iOS 13

score 5 · Answer 13 · answered Jun 19 '21 at 16:02

Search Bar Color Change

Simply change the searchbar style to minimal and it will show the search bar's background color. To change the oval inside the box aka the textfield. Just change the searchbar.textfield.backgroundcolor attribute.

 searchbar.searchBarStyle = .minimal
 searchbar.backgroundColor = //color here                  
 searchbar.searchTextField.backgroundColor = //color here

score 4 · Answer 14 · answered Aug 17 '17 at 15:52

FWIW I'm solving this problem by creating a computed variable named textField.

extension UISearchBar {
    var textField: UITextField? {
        return subviews.first?.subviews.first(where: { $0.isKind(of: UITextField.self) }) as? UITextField
    }
}

score 3 · Answer 15 · answered Jul 30 '16 at 16:44

A very common answer to this question on the web is this solution described above:

for subView in searchBar.subviews {
    for subViewInSubView in subView.subviews {   
        if subViewInSubView.isKindOfClass(UITextField) {
            subViewInSubView.backgroundColor = UIColor.purpleColor()
       }
    }
}

But it didn't work for me using XCode 7 and iOS 9, and I noticed that around the web many others reported that it didn't work for them, either. I discovered that the UITextField subview isn't created (or at least it isn't added as a subview) until it is referenced, and one way it can be referenced is by the placeholder field, e.g., one could add this line before searching the subviews for the UITextField class:

searchBar.placeholder = searchBar.placeholder

Adding the placeholder before searching subviews made the difference for me, good catch! — JustinM, Sep 12 '16 at 05:56

score 2 · Answer 16 · answered Dec 03 '18 at 19:32

Here's the solution:

func customizeSearchBar(){
    if let textfield = searchController.searchbar.value(forKey: "searchField") as? UITextField {
        textfield.textColor = UIColor.blue
        if let backgroundview = textfield.subviews.first {

            // Background color
            backgroundview.backgroundColor = UIColor.white

            // Rounded corner
            backgroundview.layer.cornerRadius = 10;
            backgroundview.clipsToBounds = true;
        }
    }
}

But Please note that this works only in iOS 11.0 and later. So don't forget to add before that

if #available(iOS 11.0, *) {}

ale_stro · Answer 17 · 2017-08-09T09:29:50.300

Set any color you want. SWIFT 3

public extension UISearchBar {
  public func setStyleColor(_ color: UIColor) {
    tintColor = color
    guard let tf = (value(forKey: "searchField") as? UITextField) else { return }
    tf.textColor = color
    if let glassIconView = tf.leftView as? UIImageView, let img = glassIconView.image {
      let newImg = img.blendedByColor(color)
      glassIconView.image = newImg
    }
    if let clearButton = tf.value(forKey: "clearButton") as? UIButton {
      clearButton.setImage(clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate), for: .normal)
      clearButton.tintColor = color
    }
  }
}

extension UIImage {

  public func blendedByColor(_ color: UIColor) -> UIImage {
    let scale = UIScreen.main.scale
    if scale > 1 {
      UIGraphicsBeginImageContextWithOptions(size, false, scale)
    } else {
      UIGraphicsBeginImageContext(size)
    }
    color.setFill()
    let bounds = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    UIRectFill(bounds)
    draw(in: bounds, blendMode: .destinationIn, alpha: 1)
    let blendedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return blendedImage!
  }
}

score 1 · Answer 18 · answered Mar 08 '19 at 14:03

A UISearchBar extension using Swift 4 based on the most voted answer

extension UISearchBar {

    func tfBackgroundColor(color: UIColor){
        for view in self.subviews {
            for subview in view.subviews {
                if subview is UITextField {
                    let textField: UITextField = subview as! UITextField
                    textField.backgroundColor = color
                }
            }
        }
    }
    }

score 0 · Answer 19 · answered Nov 17 '15 at 08:03

Just try your code as below in playground. If still that won't work, add more code to your question...

let searchView = UIView(frame: CGRect(x: 0.0,y: 0.0, width: 100, height: 50))

let searchBar:UISearchBar = UISearchBar(frame: CGRectMake((searchView.frame.width - UIScreen.mainScreen().bounds.width / 1.6) / 2, 0, UIScreen.mainScreen().bounds.width / 1.6, 24))

for subView in searchBar.subviews {
    for subViewInSubView in subView.subviews {   
        if subViewInSubView.isKindOfClass(UITextField) {
            subViewInSubView.backgroundColor = UIColor.purpleColor()
        }
    }
}

score 0 · Answer 20 · answered Aug 14 '18 at 01:03

I just came to share the ONLY way I could change the background color for the searchbar textField because I havent seen it on any answer yet, and none of the other suggestions, here or the in other sites, have worked for me.

Get the textField from the search bar, like the answer from @Steve ... anything works here as long as you get the textField. This was not my problem, the thing is, it did not metter the colors I setted here, it was not working extension UISearchBar { var textField: UITextField? { return subviews.first?.subviews.first(where: { $0.isKind(of: UITextField.self) }) as? UITextField } }
Make a new layer with the size of the navigationBar let layer = CALayer() layer.backgroundColor = UIColor.white.withAlphaComponent(0.5).cgColor //Set your color here layer.frame = navigationBar.frame
Set the new layer as sublayer for textfield navigationBar.textField?.layer.masksToBounds = true //to make sure you get the rounded corners navigationBar.textField?.layer.cornerRadius = 14 //Round it as you wish navigationBar.textField?.layer.addSublayer(layer)
thats it, you will have an rounded textField background with any color you want.

score 0 · Answer 21 · answered Jan 30 '19 at 08:26

0

Here's the solution

func configureSearchBar() {
    for textField in searchBar.subviews.first!.subviews where textField is UITextField {
        textField.backgroundColor = .cyan
    }
}

answered Jan 30 '19 at 08:26

Andrew Bell

89
1
1

score 0 · Answer 22 · edited Dec 24 '22 at 21:21

0

For Swift 5 iOS 13+

The first line is to change the colour of the outside box colour and the second one is to change the colour of inside the search text box.

searchBar.barTintColor = .red
searchBar.searchTextField.backgroundColor = .white

edited Dec 24 '22 at 21:21

fatihyildizhan

8,614
7
64
88

answered Dec 23 '22 at 13:08

Muhammad Yousuf

1
1

Cannot change search bar background color

22 Answers22

Edited

Compatible from iOS 9 to iOS 13.

Swift 4+

Usage Example:

Objective-C

UISearchBar+SearchTextField.h

UISearchBar+SearchTextField.m

Usage Example:

Linked