Remove Border of UISearchBar in iOS7

Question

I'm trying to remove border of UISearchBar in iOS 7. In iOS 6 it's working fine. I created the UISearchBar programatically. I tried almost every thing from Stack Overflow and Google.

SearchBar looking right now

What i want to achieve

I tried all these stuffs mentioned below

searchBar.layer.borderWidth = 1;
searchBar.layer.borderColor = [[UIColor whiteColor] CGColor];

and

for (id img in searchBar.subviews)
{       
     if ([img isKindOfClass:NSClassFromString(@"UISearchBarBackground")])
     {     
            [img removeFromSuperview];    
     }
}

and

for (UIView *sub in self.tableView.tableHeaderView.subviews) {
    if ([sub isKindOfClass:[UIImageView class]]) {
        sub.hidden = YES;
    }
}

but still no success.

score 109 · Answer 1 · edited Jun 23 '17 at 07:45

109

Set Search Style = minimal in Search Bar properties in IB

Or

Swift:
searchBar.searchBarStyle = UISearchBarStyleMinimal;

Swift 3:
searchBar.searchBarStyle = .minimal;

edited Jun 23 '17 at 07:45

Jacopo Penzo

2,168
2
24
29

answered Nov 11 '13 at 05:59

nerowolfe

4,787
3
20
19

i created the `UISearchBar` programatically. – iEngineer Nov 11 '13 at 06:12
searchBar.searchBarStyle = UISearchBarStyleMinimal; – nerowolfe Nov 11 '13 at 06:13
1

searchBarStyle of UISearchBar is available from iOS7.0 and later. – John Paul Manoza Apr 17 '14 at 03:13
Thanks!!! work!! Xamarin.iOS code searchBar.SearchBarStyle = UISearchBarStyle.Minimal; – Marcos José Pérez Pérez Jul 20 '17 at 18:23

score 60 · Answer 2 · edited Apr 10 '18 at 05:34

60

Setting searchBarStyle to UISearchBarStyleMinimal messed up my color setup, so doing this instead fixed the issue.

[self.searchField setBackgroundImage:[[UIImage alloc]init]];

For those looking for this option in Swift 4:

searchField.setBackgroundImage(UIImage(), for: .any, barMetrics: UIBarMetrics.default)

edited Apr 10 '18 at 05:34

Dom Bryan

1,238
2
19
39

answered Jun 08 '14 at 18:52

Rich Fox

2,194
18
20

6

this is better than any other answer here! – Umit Kaya Jun 11 '15 at 03:22
This is the one that worked for me , and I tried almost all of the other ones here .. Xcode 11.3.1 – Taoufik Jun 13 '22 at 12:15

score 29 · Answer 3 · edited Mar 24 '20 at 18:34

29

For Swift, these 2 lines are enough:

self.search.isTranslucent = false
self.search.backgroundImage = UIImage()

And then, apply required color that you want:

self.search.barTintColor = .red

edited Mar 24 '20 at 18:34

Axel Guilmin

11,454
9
54
64

answered May 25 '16 at 08:15

Alap Anerao

2,083
22
27

score 23 · Accepted Answer · edited Jan 11 '18 at 07:42

23

I found the solution: set the barTintColor of UISearchBar to clearColor

topSearchBar.barTintColor = [UIColor clearColor];

edited Jan 11 '18 at 07:42

Pang

9,564
146
81
122

answered Nov 11 '13 at 06:31

iEngineer

1,319
1
11
27

but sometimes work for this solution , i am using identical code , but one works and the other show black color , so i use whitecolor to fix it . strange – chings228 Mar 15 '14 at 08:00
9

In my case, it always showed black color when I set clear color :( – Ajith Renjala Jun 17 '14 at 11:46
Try doing nerowolfe's answer: – TheMan Jul 17 '14 at 04:49
@Thought-Beast May be you set the alpha to some minimum value line .1 or something? – iEngineer Aug 06 '14 at 10:26

Hemang · Answer 5 · 2016-06-30T11:00:59.327

This only works if .borderStyle = UITextBorderStyleLine; .

My experiments conclusion,

If you're on iOS7 and above, and if you'll set, searchBar.barTintColor = [UIColor clearColor]; then you'll not able to customise background colour of UISearchBar.
if you'll set searchBarStyle to UISearchBarStyleMinimal then it'll mess the color of UISearchBar as said by @Rich Fox.

So, [self.searchField setBackgroundImage:[[UIImage alloc]init]]; solution to remove border.

Update with sample:

UISearchBar *search = [[UISearchBar alloc] init];
search.tag = kTagSearchBar;
search.delegate = self;
search.tintColor = [UIColor redColor];
search.searchBarStyle = UISearchBarStyleMinimal;
search.frame = CGRectMake(0, 0, 320, 50);
search.placeholder = @"Search";
search.barTintColor = [UIColor blueColor];
search.translucent = NO;
search.opaque = NO;
search.showsCancelButton = NO;
[search setBackgroundImage:[[UIImage alloc] init]];
[self.view addSubview:search];

//customize textfield inside UISearchBar
@try {
    for (id object in [[[search subviews] firstObject] subviews])
    {
        if (object && [object isKindOfClass:[UITextField class]])
        {
            UITextField *textFieldObject = (UITextField *)object;
            textFieldObject.backgroundColor = [UIColor whiteColor];
            textFieldObject.borderStyle = UITextBorderStyleLine;
            textFieldObject.layer.borderColor = [UIColor blueColor].CGColor;
            textFieldObject.layer.borderWidth = 1.0;
            break;
        }
    }
}
@catch (NSException *exception) {
    NSLog(@"Error while customizing UISearchBar");
}
@finally {

}

will give you:

enter image description here

This is correct. Setting the background image removed the border. — Rishab, Dec 14 '16 at 04:14

score 4 · Answer 6 · edited Sep 22 '17 at 09:16

4

Neither only barTintColor, backgroundImage nor backgroundColor alone were doing it for me, but doing them all together worked for me:

self.searchBar.translucent      = NO;
self.searchBar.barTintColor     = [styleManager currentSearchBarTintColor];
self.searchBar.backgroundImage  = [UIImage new];
self.searchBar.backgroundColor  = [styleManager currentSearchBarTintColor];

edited Sep 22 '17 at 09:16

Alap Anerao

2,083
22
27

answered Nov 10 '16 at 01:16

Kreeble Song

121
1
8

score 3 · Answer 7 · edited Jan 30 '19 at 14:29

3

Okay. There are so many answers, but they are too complex. I've found this solution:

Swift 3 (4)

searchBar.setBackgroundImage(UIImage(), for: .top, barMetrics: .default)
searchBar.backgroundColor = .primary

Where .primary is

extension UIColor {

    static var primary:UIColor {
        return "#5163F4".color
    }
}

edited Jan 30 '19 at 14:29

Adam Bardon

3,829
7
38
73

answered Oct 19 '17 at 13:46

Daniil Chuiko

866
8
7

score 1 · Answer 8 · edited Aug 16 '17 at 16:00

self.searchBar.translucent = NO;
self.searchBar.opaque = NO;
if ([self.searchBar respondsToSelector:@selector(setSearchBarStyle:)]) {
    self.searchBar.searchBarStyle = UISearchBarStyleMinimal;
}

// iOS 7 remove 1 px bottom border
if ([self.searchBar respondsToSelector:@selector(setBarTintColor:)]) {
    self.searchBar.barTintColor = [UIColor clearColor];
}
self.searchBar.barStyle = UIBarStyleDefault;

// to remove the 1px bottom border iOS 5, 6
[self.searchBar setBackgroundImage:[UIImage imageWithColor:[UIColor clearColor] andSize:CGSizeMake(1.0f, 1.0f)]];

The order of code seems does matter. It doesn't work if I set the barStyle before the searchBarStyle.

score 1 · Answer 9 · edited Jan 11 '18 at 07:59

Swift 2.1 in Xcode 7.2, this worked for me.

self.searchController.searchBar.backgroundImage = UIImage()

My full code below.

searchController.searchResultsUpdater = self
searchController.dimsBackgroundDuringPresentation = false
self.searchController.searchBar.sizeToFit() 
tableView.sectionIndexBackgroundColor = UIColor(red: 0/255, green: 181/255, blue: 229/255, alpha: 1.0)
self.searchController.searchBar.backgroundColor = UIColor(red: 0/255, green: 181/255, blue: 229/255, alpha: 1.0)
self.searchController.searchBar.barTintColor = UIColor(red: 0/255, green: 181/255, blue: 229/255, alpha: 1.0)
self.searchController.searchBar.backgroundImage = UIImage()
definesPresentationContext = true
tableView.tableHeaderView = searchController.searchBar

score 0 · Answer 10 · answered Aug 11 '15 at 08:19

- (void)createNavigationBar
{
    _searchBar = [[UISearchBar alloc]init];
    _searchBar.backgroundColor = [UIColor whiteColor];
    _searchBar.placeholder = @"Search";
    _searchBar.translatesAutoresizingMaskIntoConstraints = NO;

    self.navigationItem.titleView = _searchBar;
    NSDictionary *viewsDictionary = @{@"SearchBar":_searchBar};
    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-5-[SearchBar(30)]|"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];
    NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-15-[SearchBar]-15-|"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];
    [_searchBar.superview addConstraints:constraint_POS_V];
    [_searchBar.superview addConstraints:constraint_POS_H];

}

Remove Border of UISearchBar in iOS7

10 Answers10

Linked