Custom clear button in UISearchBar text field

Question

I tried:

UITextField *searchtextfield = [searchBar.subviews objectAtIndex:1];
    UIButton *cButton = [UIButton buttonWithType:UIButtonTypeCustom];
    cButton.frame = CGRectMake(0, 0, 20 , 20);
    cButton.backgroundColor = [UIColor clearColor];
    [cButton setImage:[UIImage imageNamed:@"x-button"] forState:UIControlStateNormal];//your button image.
    cButton.contentMode = UIViewContentModeScaleToFill;
    [cButton addTarget:self action:@selector(xButtonPressed) forControlEvents:UIControlEventTouchUpInside];//This is the custom event
    [searchtextfield setRightView:cButton];
    [searchtextfield setRightViewMode:UITextFieldViewModeWhileEditing];

But it doesn't work very well... It displays custom button, but when you type something, the old one get's back...

How can I do this?

follow my answer http://stackoverflow.com/questions/13799074/how-to-override-the-cancel-button-in-the-uisearchbar/13799144#13799144 — Rajneesh071, Dec 13 '12 at 15:19

score 8 · Answer 1 · edited Jan 21 '16 at 15:32

8

If you want to set a custom clear button in a UISearchBar try this:

[[UISearchBar appearance] setImage:[UIImage imageNamed:@"MyClearButton.png"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal];

Don't forget to set an image for UIControlStateHighlighted

[[UISearchBar appearance] setImage:[UIImage imageNamed:@"HighlightedClearButton.png"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateHighlighted];

edited Jan 21 '16 at 15:32

Dani Pralea

4,545
2
31
49

answered Oct 17 '13 at 22:01

irblue

841
7
8

Thanks, works perfectly. If someone is looking for the Swift version of this code, it can be found there: http://stackoverflow.com/a/25419881/1447641 – Apfelsaft Aug 21 '14 at 06:54
It worked for me. Thanks. I thought I had to do it with the UISearchBar object instance. – Augusto Carmo Jun 14 '17 at 11:51

score 7 · Answer 2 · answered Jan 17 '14 at 08:53

You need the following

[searchBar setImage:[UIImage imageNamed:@"image1"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateHighlighted];
[searchBar setImage:[UIImage imageNamed:@"image2"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal];

It is strongly recommended to place strings in this order starting from UIControlStateHighlighted in case you want to use the same image: image1=image2=image.

In iOS7 it is weird but fact that direct order of UIControlStateNormal and UIControlStateHighlighted doesn't work.

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

You can hide your cancel button on searchBarTextDidBeginEditing

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
{
    [searchBar setShowsCancelButton:NO animated:YES];
}

And the most amazing you can also hide you clear button by

UITextField *textField=(UITextField*)[[searchBar subviews]objectAtIndex:1];
textField.clearButtonMode=UITextFieldViewModeNever;

Follow my answer foe more info link

edited May 23 '17 at 12:34

Community

1
1

answered Dec 13 '12 at 15:21

Rajneesh071

30,846
15
61
74

no its for cancel button @Mert , its already clear from function name setShows"Cancel"Button – Rajneesh071 Dec 13 '12 at 15:25
Yes, your answer is for cancel button, but @1337code has asked about clear button. – Mert Dec 13 '12 at 15:29

score 0 · Answer 4 · edited Dec 13 '12 at 16:01

0

Set clearButtonMode to UITextFieldViewModeNever and rightViewMode to UITextFieldViewModeAlways

edited Dec 13 '12 at 16:01

Rajneesh071

30,846
15
61
74

answered Dec 13 '12 at 15:22

Mert

6,025
3
21
33

score 0 · Answer 5 · answered Apr 20 '17 at 09:56

In swift 2.2, following code worked for me

        [UISearchBar .appearance().setImage(UIImage(named: "search_clear_icon"), forSearchBarIcon: .Clear, state: .Normal)]

    [UISearchBar .appearance().setImage(UIImage(named: "search_clear_icon"), forSearchBarIcon: .Clear, state: .Highlighted)]

score 0 · Answer 6 · answered Jul 15 '18 at 13:32

Swift 4.2, 4.1+ of malex answer,

UISearchBar.appearance().setImage(UIImage(named: "image1"), for: .clear, state: .normal)
UISearchBar.appearance().setImage(UIImage(named: "image2"), for: .clear, state: .highlighted)

I also answered this here to set clear button tintColor along with results button customization.

Custom clear button in UISearchBar text field

6 Answers6

Linked