Change Tint color of CLEAR button inside UISearchBar NOT CANCEL BUTTON

Question

I want to customize the cancel button inside the UISearchBar, that appears when the user type a text, to clear the text, see the image, I want to change the tint color of the button inside the red square NOT the button with "cancel" text

What I have tried :

[[UIButton appearanceWhenContainedIn:[UISearchBar class], nil] setTintColor:[UIColor redColor]];

but it changes the color of the button with the text "cancel" not the icon to clear the text inside the textfield

it's not a duplicate question because I want to change the tint of the default clear image, NOT using a custom image, something like that :

How to change the tint color of the clear button on a UITextField

but for UISearchBar

Possible Duplicate of http://stackoverflow.com/questions/13862050/custom-clear-button-in-uisearchbar-text-field — Prashant Tukadiya, May 25 '16 at 11:15
check this question http://stackoverflow.com/questions/1200149/styling-the-cancel-button-in-a-uisearchbar — , May 25 '16 at 11:17
I am talking about the clear button the button with red square — iOSGeek, May 25 '16 at 11:30
I am also getting the same issue clear button color is not changed. — Deepak Saki, Aug 22 '17 at 10:58

score 2 · Answer 1 · answered May 25 '16 at 11:37

2

UIImage *imgClear = [UIImage imageNamed:@"clear"];
[mySearchBar setImage:imgClear forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal];

answered May 25 '16 at 11:37

Shreyank

1,549
13
24

1

That works, but I want to just change the tint color to white of the default clear button (because the background color of the text field is dark) – iOSGeek May 25 '16 at 11:44
check this answer for swift version: https://stackoverflow.com/a/52257939/3400939 – Kosrat D. Ahmad Sep 11 '18 at 08:01

score 1 · Answer 2 · answered Jul 15 '18 at 13:24

Swift 4.2, 4.1+

It seems that the currentImage is nil for clearButton from Swift 4.1+. It might be working in the older versions.

So i created this class and the addition here is to provide your own image and color for clear button.

class SearchBar: UISearchBar {

    var clearButtonImage: UIImage?
    var clearButtonColor: UIColor = .white

    override func layoutSubviews() {
        super.layoutSubviews()

        if let textField = self.value(forKey: "searchField") as? UITextField {
            if let clearButton = textField.value(forKey: "clearButton") as? UIButton {
                update(button: clearButton, image: self.clearButtonImage, color: clearButtonColor)
            }
        }
    }

    private func update(button: UIButton, image: UIImage?, color: UIColor) {
        let image = (image ?? button.currentImage)?.withRenderingMode(.alwaysTemplate)
        button.setImage(image, for: .normal)
        button.setImage(image, for: .highlighted)
        button.tintColor = color
    }
}

So now you can set the clearButton image as below to make it work,

let searchBar = SearchBar()
searchBar.clearButtonImage = UIImage(named: "clearIcon")
searchBar.clearButtonColor = .green

Storyboard or XIB

You have to set the SearchBar class as custom class for search bar shown below,

And outlet as below to set the images and colors etc

@IBOutlet private weak var searchBar: SearchBar!

The reason it is nil is because you need to have typed something at least once for it to been loaded into memory. So you need to update it on the first edit as well (or as you do, in layoutSubviews) — Claus Jørgensen, May 23 '19 at 13:58

Change Tint color of CLEAR button inside UISearchBar NOT CANCEL BUTTON

2 Answers2