How to change the colour of the 'Cancel' button on the UISearchBar in Swift

Question

I have added a UISearchBar to the top of my PFQueryTableViewController. I have changed the colour of the searchBar to be the colour of my app, but in doing this, it seems to have also changed the colour of the 'Cancel' button to the right of it to the same colour. Ideally, I want the colour to be White.

This image shows how it currently looks:

It looks like there is no 'Cancel' button, but there is, its just the same colour as the searchBar (You can still press it etc)

Is there a way for me to change the colour of this 'Cancel button to white? Everything i've tried seems to make no difference.

Code i've used to make the UISearchBar this colour is:

UISearchBar.appearance().barTintColor = UIColor(hue: 359/360, saturation: 67/100, brightness: 71/100, alpha: 1)
UISearchBar.appearance().tintColor = UIColor(hue: 359/360, saturation: 67/100, brightness: 71/100, alpha: 1)

And in the storyboard i've set these:

And finally, to make the placeholder, and text white inside the SearchBar, i've used:

for subView in self.filmSearchBar.subviews {

    for subsubView in subView.subviews {

        if let searchBarTextField = subsubView as? UITextField {

            searchBarTextField.attributedPlaceholder = NSAttributedString(string: NSLocalizedString("Search Cinevu film reviews", comment: ""), attributes: [NSForegroundColorAttributeName: UIColor.whiteColor()])

            searchBarTextField.textColor = UIColor.whiteColor()

        }

    }

}

Thanks for any help! :)

@cbay It was the default colour which is like a light/faint gray — Nick89, Feb 09 '16 at 21:48
I haven't worked with search bars (and I do all my UI stuff programmatically), but where's the code for the cancel button? You should just be able to change the color with something like cancelButton.backgroundColor = UIColor.greyColor() — cbay, Feb 09 '16 at 21:51
I was just looking at the docs. showsCancelButton defaults to NO. Try setting it to YES. I can't find where to change the color on it, if that's possible. — cbay, Feb 09 '16 at 21:54
http://stackoverflow.com/questions/19651374/how-to-change-cancel-button-tint-color-of-uisearchbar-in-ios7 http://stackoverflow.com/questions/27838084/change-uibarbuttonitem-from-uisearchbar might help you. — cbay, Feb 09 '16 at 22:04
I have written an answer to this topic here: http://stackoverflow.com/questions/19206757/how-to-change-textcolor-of-cancel-button-of-uisearchbar-in-ios7. Just use the SHSearchBar Cocoapod which is not such a pain in the ass like the UISearchBar. — blackjacx, Nov 25 '16 at 12:39

score 34 · Accepted Answer · edited Mar 12 '18 at 09:33

34

Having a look around, this seemed to be the best way to achieve what I needed:

 let cancelButtonAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
 UIBarButtonItem.appearance().setTitleTextAttributes(cancelButtonAttributes , for: .normal)

edited Mar 12 '18 at 09:33

Jack

13,571
6
76
98

answered Feb 10 '16 at 20:58

Nick89

2,948
10
31
50

1

If you are using **UISearchController** you must insert this code to **willPresentSearchController:** or **didPresentSearchController:** – LightNight Oct 27 '16 at 15:14
Does this affect anything else in the app or just the cancel button? – Arthur Garza Nov 03 '16 at 00:37
1

@ArthurGarza it only effects the cancel button – Nick89 Nov 03 '16 at 14:12
this affects the back button title color. – Pratyush Pratik Sep 17 '21 at 07:50

score 17 · Answer 2 · answered Jan 19 '18 at 11:55

17

Use this single line in code to change color of cancel button:

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes([NSAttributedStringKey(rawValue: NSAttributedStringKey.foregroundColor.rawValue): UIColor.white], for: .normal)

Checked in Xcode 9.2 with Swift 4.0

answered Jan 19 '18 at 11:55

Incredible_Dev

956
7
13

1

Flawless victory. Xcode 9.4.1, Swift 4.0, iOS 11.4.1 – eGanges Jul 24 '18 at 15:36
1

Just to simplify a bit: ... setTitleTextAttributes([.foregroundColor : UIColor.white], for: .normal) – Rufat Mirza Aug 29 '18 at 08:55

score 11 · Answer 3 · answered Apr 26 '17 at 04:43

11

Base on Nick89's code , I changed like that for Swift 3.1

let cancelButtonAttributes: [String: AnyObject] = [NSForegroundColorAttributeName: UIColor.white]

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes(cancelButtonAttributes, for: .normal)

I want to change on UISearchBar only instead of all UIBarButton, so I'm using like UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self])

answered Apr 26 '17 at 04:43

saturngod

24,649
17
62
87

1

The same answer in **Swift 4**: `let cancelButtonAttributes: [NSAttributedString.Key: Any] = [NSAttributedString.Key.foregroundColor: UIColor.gray] UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes(cancelButtonAttributes, for: .normal)` – Despotovic Oct 17 '18 at 14:29

score 8 · Answer 4 · answered Feb 09 '16 at 21:55

8

did you try UISearchBar.appearance().tintColor = UIColor.whiteColor()

answered Feb 09 '16 at 21:55

David Yang Liu

1,170
2
10
19

I have yes, It doesn't change the colour of the text. It just adds a faint outline to the button area. – Nick89 Feb 09 '16 at 22:00
you got a sample app you can upload? – David Yang Liu Feb 09 '16 at 22:12
@DavidYangLiu it also changes the cursor color? – iamVishal16 Feb 19 '18 at 07:04

score 8 · Answer 5 · answered Nov 05 '18 at 08:30

8

Swift 4.2

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.black], for: .normal)

answered Nov 05 '18 at 08:30

Abhishek Jain

4,557
2
32
31

score 6 · Answer 6 · edited Jan 01 '19 at 17:24

6

The Swift 4.2 version, based on other answers:

let cancelButtonAttributes: [NSAttributedString.Key: Any] = [NSAttributedString.Key(rawValue: NSAttributedString.Key.foregroundColor.rawValue): UIColor.orange]
UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes(cancelButtonAttributes, for: .normal)

edited Jan 01 '19 at 17:24

Krishna Raj Salim

7,331
5
34
66

answered May 31 '18 at 15:26

Matt

674
11
25

score 5 · Answer 7 · answered Apr 16 '18 at 07:12

I know this question does have enough answers but here is simple way to achieve, SearchBar Background colour and Cancel button background colour we can change directly it in storyboard Attributes inspector.

for SearchBar background colour

for SearchBar cancel button colour

score 3 · Answer 8 · answered Jun 25 '18 at 14:45

With the Swift 4.0 RELEASE 2017-09-19 toolchain, this worked:

    let cancelButtonAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
    UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes(cancelButtonAttributes, for: .normal)

score 2 · Answer 9 · answered Sep 07 '19 at 06:27

You can simply set tintcolor of searchBar to change color of Cancel button. This is available since swift 4 so should do the trick.

let searchBar = UISearchBar(frame: )
searchBar.tintColor = .orange

Search bar cancel button and cursor color change

score 2 · Answer 10 · answered Feb 05 '20 at 07:32

2

Swift 5

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes([.foregroundColor : UIColor.barTint], for: .normal)

answered Feb 05 '20 at 07:32

lexxnew

21
2

Lokesh SN · Answer 11 · 2019-02-26T10:09:44.457

All the above answers didn't work for me. (Got 'Type 'NSAttributedString.Key' (aka 'NSString') has no member 'foregroundColor'' error)

Maybe because I'm at Swift 3...

Here's the slightly-modified code that worked for me:-

UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes([NSForegroundColorAttributeName : .black], for: .normal)

Note:-

If you are using UISearchController, insert this code to 'willPresentSearchController:' or 'didPresentSearchController:'

score -1 · Answer 12 · answered Jul 16 '18 at 06:45

-1

Swift 4.2, 4.1

A custom class added here can be used to customize the most common elements in a searchBar. Custom class SearchBar can result in to the following search bar.

answered Jul 16 '18 at 06:45

Kamran

14,987
4
33
51

How to change the colour of the 'Cancel' button on the UISearchBar in Swift

12 Answers12

Linked