UISearchBar cancel button color?

Question

When I drop a UISearchBar into my view inside Interface Builder, and change its style to Black Opaque, the cancel button stays unfittingly blue / gray and doesn't become black.

How can I make the cancel button black?

EDIT: It does work like this:

// Assume a UISearchBar searchBar.
NSArray *subviews = [searchBar subviews];

// The index depends on how you configure the searchBar.
UIButton *cancelButton = [subviews objectAtIndex:3];

// Set the style to "normal" style.
[cancelButton setStyle:0];

But the setStyle: method is from a private framework, so this might be an issue when submitting the app to Apple.

instead of using [canelButton setStyle:0] use cancelButton.tintColor=[UIColor blackColor]; — Priyanka V, May 16 '12 at 05:23

score 120 · Answer 1 · edited Jul 12 '17 at 14:09

120

I used some thing like this and worked with me:

[[UIBarButtonItem appearanceWhenContainedIn: [UISearchBar class], nil] setTintColor:[UIColor blackColor]];

it changed the cancel button color to black.

Update for iOS 9.0, the method appearanceWhenContainedIn is deprecated, use appearanceWhenContainedInInstancesOfClasses instead:

[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTintColor:[UIColor blackColor]];

And in Swift 3:

UIBarButtonItem.appearance(whenContainedInInstancesOf:[UISearchBar.self]).tintColor = UIColor.black

edited Jul 12 '17 at 14:09

Sergey Grischyov

11,995
20
81
120

answered Apr 03 '13 at 15:08

Hossam Ghareeb

7,063
3
53
64

Deprecated in iOS 9: [apple doc](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIAppearance_Protocol/index.html#//apple_ref/occ/intfcm/UIAppearance/appearanceWhenContainedIn:). Solution: http://stackoverflow.com/questions/24136874/appearancewhencontainedin-in-swift/27807417#27807417 – Simon Epskamp Sep 19 '15 at 18:09
8

Not really working on iOS 9. The button color stays the same. – ljk321 Dec 01 '15 at 07:31
3

What's with this up vote madness? Set `tintColor`, job done – Adam Waite Mar 15 '16 at 10:15
1

@AdamWaite tintColor changes both the cursor and "Cancel" button color. – Chaitanya Shah Mar 25 '16 at 17:07
@ChaitanyaShah just set the searchBar tintColor to the desired "Cancel" button color, and UITextField's appearanceWhenContainedIn... to another color – leonaka Oct 22 '16 at 00:35
Swift 3: UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).tintColor = UIColor.black – iStar Apr 15 '17 at 07:42
This is not working if set after creating instance of UISearchBar – Misha Jul 17 '17 at 12:38

score 36 · Answer 2 · answered Sep 07 '10 at 11:43

The problem with your solution is that the code is assuming that the objectAtIndex:3 is the cancel button. Not only does this generate a compiler warning, but also if you are displaying the Cancel button programmatically (for example using [searchBar setShowsCancelButton:YES], you risk crashing the application.

A simpler solution is to set the style of the whole search bar in ViewDidLoad(), using:

searchBar.tintColor = [UIColor colorWithWhite:0.3 alpha:1.0];

this overrides the style set in the Interface Builder BUT also changes the colour of the Cancel button to be same colour as the whole bar (although it doesn't let you set the style of Cancel button independently, unfortunately.

We can also change the color of the cancel button independently irrespective of the color of the searchbar. searchBar=[[UISearchBar alloc]initWithFrame:CGRectMake(10,346,300,0)]; searchBar.tintColor=[Reusables SKColorFromHexString:@"#505a62"]; searchBar.delegate=self; searchBar.showsCancelButton=YES; NSArray *subviews = [searchBar subviews]; // The index depends on how you configure the searchBar. UIButton *cancelButton = [subviews objectAtIndex:2]; cancelButton.tintColor=[UIColor lightTextColor]; — Priyanka V, May 16 '12 at 05:20

score 9 · Answer 3 · edited Jul 27 '20 at 13:44

9

Try this and see: (I tested below code with Swift 4.1 - Xcode 9.3-beta4)

@IBOutlet weak var sbSearchBar: UISearchBar!

sbSearchBar.showsCancelButton = true
sbSearchBar.barTintColor = UIColor.blue
sbSearchBar.tintColor = UIColor.red

if let buttonItem = sbSearchBar.subviews.first?.subviews.last as? UIButton {
    buttonItem.setTitleColor(UIColor.yellow, for: .normal)
}

edited Jul 27 '20 at 13:44

Frederik Winkelsdorf

4,383
1
34
42

answered Mar 15 '18 at 14:31

Krunal

77,632
48
245
261

1

Hi, I think you should use `first(where:)` to find the `UINavigationButton` ``` if let cancelItem = searchBar.subviews.first?.subviews.first(where: { $0 is UIButton }) as? UIButton { cancelItem.setTitleColor(UIColor.black, for: .normal) } ``` – Arco Oct 18 '18 at 08:34

score 6 · Answer 4 · answered May 08 '17 at 12:33

6

for iOS 10:

UISearchBar.appearance().tintColor = UIColor.red //cancel button color
UISearchBar.appearance().barTintColor = UIColor.blue //background button color

answered May 08 '17 at 12:33

MobileMon

8,341
5
56
75

Putting this in `AppDelegate.application()` sets it globally for your app, which is perfect for me. Simple and effective. – Dale Jul 10 '18 at 15:36

score 6 · Answer 5 · answered Nov 28 '18 at 07:03

In Swift 4.2

let appearance = UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self])
appearance.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor(named: "goldColor")!], for: .normal)

This works for me. Thanks @Tim Semple

score 4 · Answer 6 · edited May 23 '17 at 12:02

This is an updated version of Hossam Ghareeb's answer above for Swift 3:

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self] ).tintColor = UIColor.red

But this will not override appearance if it has already been set elsewhere for UIBarButtonItem.

For example, in my navbar controller I had to change this:

UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.white], for: UIControlState.normal)

To this for the solution above to work:

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UINavigationBar.self] ).setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.white], for: UIControlState.normal)

score 2 · Answer 7 · answered Jan 07 '20 at 12:33

Came up with a following solution and it is working on iOS 13.0 and iOS 12.4 as well, must be working on prior versions to till iOS 9.0. The following solution is for:

Cancel Button Color (Normal State).
Cancel Button Color (Disabled State).
Search Bar Text Field Background Color (Normal State).

For Objective C:

[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTintColor:[UIColor whiteColor]]; 

[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]} forState:UIControlStateNormal];

[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]} forState:UIControlStateDisabled];

[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitleTextAttributes:@{NSBackgroundColorAttributeName: [UIColor whiteColor]} forState:UIControlStateNormal];

The above code also fixed my UI issues for iOS 13 and iPhone X. I included this code in my AppDelegate.m class in didFinishLaunchingWithOptions function, so that the changes could be done in the whole app.

score 1 · Answer 8 · edited May 23 '17 at 11:47

I have taken Benjamin's answer and combined it with safe Array lookup to produce a short, but safe functional version:

searchController.searchBar.tintColor = UIColor.whiteColor()
(searchController.searchBar.subviews[safe: 0]?.subviews as? [UIView])?
    .filter({$0.isKindOfClass(UITextField)})
    .map({$0.tintColor = .lightGrayColor()})

This results in coloring the Cancel button white and the cursor when typing gray. Otherwise it would be white and thus not seen. The searchController is an object of type UISearchController. If anybody wants to use it inside the results controller, replace it with self.

The implementation of the safe: subscript is nkukushkin's answer:

extension Array {
    subscript(safe index: Int) -> T? {
        return indices(self) ~= index ? self[index] : nil
    }
}

score 1 · Answer 9 · answered Oct 21 '16 at 09:43

1

Click on Search bar and set the tint color under view from Interface Builder.

answered Oct 21 '16 at 09:43

Rishab

1,901
2
18
34

score 1 · Answer 10 · edited Dec 31 '16 at 22:45

1

let view: UIView = self.searchBar.subviews[0] as UIView
let subViewsArray = view.subviews

for subView: UIView in subViewsArray {
    if let cancelButt = subView as? UIButton{
        cancelButt.setTitleColor(UIColor.white, for: .normal)         
    }
}

This worked for me

edited Dec 31 '16 at 22:45

shin

31,901
69
184
271

answered Dec 31 '16 at 22:24

Ghadeer

11
1

score 0 · Answer 11 · answered Apr 14 '15 at 14:05

For those looking to reproduce the same behavior in Swift :

override func viewWillAppear(animated: Bool) {
    self.searchBar.tintColor = UIColor.whiteColor()

    let view: UIView = self.searchBar.subviews[0] as! UIView
    let subViewsArray = view.subviews

    for (subView: UIView) in subViewsArray as! [UIView] {
        println(subView)
        if subView.isKindOfClass(UITextField){
            subView.tintColor = UIColor.blueColor()
        }
    }

}

UISearchBar cancel button color?

11 Answers11

Linked