Customize UISearchBar: Trying to get rid of the 1px black line underneath the search bar

Question

My question is already specified in the title: I would like to get rid of the black line drawn on the bottom of the UISearchBar. Any ideas?

Here's an image of what I mean:

search bar with black bottom line

UPDATE:

I think that the line is part of the UITableView's tableHeaderView. I still don't know how to remove it.

use this code to remove the 1px border: https://stackoverflow.com/a/64535982/2692839 — Umair Ali, Oct 26 '20 at 11:15

score 76 · Answer 1 · edited Sep 15 '16 at 15:41

76

Try this

 searchBar.layer.borderWidth = 1;

 searchBar.layer.borderColor = [[UIColor lightGrayColor] CGColor];

edited Sep 15 '16 at 15:41

Yakiv Kovalskyi

1,737
1
15
29

answered Jan 25 '12 at 06:26

Ayush Goel

1,103
1
7
7

5

Works for me, in my case I am using a custom bar tint color so my code is as follows (swift): `searchBar.layer.borderColor = searchBar.barTintColor?.CGColor` – Paludis Jan 08 '15 at 02:48
What helped me see why it works was to mistakenly set "searchBar.layer.borderColor = searchBar.tintColor?.CGColor" – Adam Eberbach Feb 03 '15 at 01:13
1

So one says to add `searchBar.layer.borderColor = searchBar.barTintColor?.CGColor` and one to remove that -_- – Iulian Onofrei Sep 17 '15 at 09:09

score 53 · Answer 2 · answered Aug 12 '14 at 22:17

53

Why:

So, I've dug into the API's trying to figure out why this is happening. Apparently whomever wrote the UISearchBar API is rasterizing the lines onto an image and setting it as it's backgroundImage.

Solution:

I propose a simpler solution, if you want to set the backgroundColor and get rid of the hairlines:

searchBar.backgroundColor = <#... some color #>
searchBar.backgroundImage = [UIImage new];

Or if you just need a background image without the hairlines:

searchBar.backgroundImage = <#... some image #>

answered Aug 12 '14 at 22:17

Oxcug

6,524
2
31
46

1

For iOS7+ you'll want to use the setBackgroundImage:forBarPosition:barMetrics: method instead. – tyler Apr 12 '16 at 16:56
This solution removes the bar. Thanks @Oxcug! – KamyFC Jun 21 '18 at 09:27

score 45 · Answer 3 · edited Jan 20 '17 at 08:10

45

I have 0.5px black horizontal lines both on top and on the bottom of my UISearchBar. The only way I had so far to get rid of them is by setting its style to Minimal:

mySearchBar.searchBarStyle = UISearchBarStyleMinimal;

edited Jan 20 '17 at 08:10

Kyle Clegg

38,547
26
130
141

answered Apr 22 '14 at 11:25

AndroC

4,758
2
46
69

4

This makes textfield greyed inside serachbar – Neeraj Joshi Jun 10 '17 at 11:08

swift2geek · Answer 4 · 2018-11-26T10:12:11.430

32

Solution for

XCode 10.1 Swift 4.2

edited Nov 26 '18 at 10:12

answered Aug 29 '17 at 09:46

swift2geek

1,697
1
20
27

2

Awesome, You made my day. – Gaurav Sep 18 '19 at 11:32
programmatically 'searchBar.searchBarStyle = .minimal' – José Raúl Toledano R Oct 13 '22 at 17:32

score 22 · Accepted Answer · edited Sep 17 '15 at 09:43

22

I fixed this by adding a subview to the searchBar's view stack like so:

CGRect rect = self.searchBar.frame;
UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(0, rect.size.height-2,rect.size.width, 2)];
lineView.backgroundColor = [UIColor whiteColor];
[self.searchBar addSubview:lineView];

Here, self.searchBar is an UISearchBar pointer of my controller class.

edited Sep 17 '15 at 09:43

Iulian Onofrei

9,188
10
67
113

answered Nov 22 '11 at 16:16

Nonlinearsound

928
8
17

I added the line in the layoutSubviews method of a UISearchBar's subclass. I was working with a subclass anyway. – strave Nov 23 '11 at 08:02

score 6 · Answer 6 · edited Dec 19 '18 at 09:25

6

Swift 4.2:

controller.searchBar.layer.borderWidth = 1
controller.searchBar.layer.borderColor = UIColor(red: 255/255, green: 253/255, blue: 247/255, alpha: 1.0).cgColor

Answer based on Ayush's answer.

edited Dec 19 '18 at 09:25

Gaurav Singla

2,271
26
43

answered Mar 07 '16 at 01:33

VBaarathi

793
8
12

Lance Samaria · Answer 7 · 2020-12-07T10:32:27.497

This is ridiculous to have to go through hoops and bounds for this little 1 px line. I've been googling around for a couple of hours to get rid of it. I tried combos of different answer to get it to work. When I came back here I realized Oxcug already had it but it's in Objective-C and that's not native for me.

Anyway here is the answer in Swift 5. If you want to have a color background inside the actual search textField I added that too.

// these 2 lines get rid of the 1 px line
searchBar.backgroundColor = .white
searchBar.backgroundImage = UIImage()

// this line will let you color the searchBar textField where the user actually types
searchBar.searchTextField.backgroundColor = UIColor.lightGray

cnotethegr8 · Answer 8 · 2013-07-03T06:40:26.677

This question has already been solved but maybe my solution can help someone else. I had a similar problem, except I was trying to remove the 1px top border.

If you subclass UISearchBar you can override the frame like this.

- (void)setFrame:(CGRect)frame {
    frame.origin.y = -1.0f;
    [super setFrame:frame];

    self.clipsToBounds = YES;
    self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(0, 1.0f);
}

Or if you would like to fix the bottom pixel you could do something like this, (untested).

- (void)setFrame:(CGRect)frame {
    frame.origin.y = 1.0f;
    [super setFrame:frame];

    self.clipsToBounds = YES;
    self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(0, -1.0f);
}

Only for simplicity of the example are the clipsToBounds and searchFieldBackgroundPositionAdjustment in the setFrame.

Also the searchFieldBackgroundPositionAdjustment is only needed to re-center the search field.

UPDATE

It turns out that the tableView will shift 1px from updating the origin.y while the searchBar is active. It feels a little strange. I realized that the solution is as simple as setting, self.clipsToBounds = YES;

score 3 · Answer 9 · answered Dec 10 '20 at 17:26

I used

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var searchBar: UISearchBar!
    


    override func viewDidLoad() {
        super.viewDidLoad()
        searchBar.backgroundImage = UIImage() // Removes the line

And it worked like a charm :)

score 3 · Answer 10 · answered Oct 01 '11 at 14:21

3

Set the tableHeaderView to nil before putting your UISearchBar there.

If that does not help, try to cover it up. First add your search bar to a generic and appropriately sized UIView (say, "wrapper") as a subview, then

CGRect frame = wrapper.frame;
CGRect lineFrame = CGRectMake(0,frame.size.height-1,frame.size.width, 1);
UIView *line = [[UIView alloc] initWithFrame:lineFrame];
line.backgroundColor = [UIColor whiteColor]; // or whatever your background is
[wrapper addSubView:line];
[line release];

And then add it to the tableHeaderView.

self.tableView.tableHeaderView = wrapper;
[wrapper release];

answered Oct 01 '11 at 14:21

Mundi

79,884
17
117
140

Thank you for your solutions. Unluckily both solutions don't cover the line. Maybe is it a drop shadow on top of the table view? Strange! – strave Oct 01 '11 at 14:57
"Set the `tableHeaderView` to `nil` before putting your `UISearchBar` there..." Why does this work? – Ben Collins Nov 05 '13 at 18:38

score 1 · Answer 11 · answered Jun 03 '13 at 23:20

Warning. This is a hack. Would like to know a better, more official way.

You can use the pony debugger to figure out where in the subview hierarchy it is. I think the thing you are see is a private UIImageView called "separator"

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];
  for (UIView* view in self.searchBar.subviews)  {
    if (view.frame.size.height == 1 && [view isKindOfClass:[UIImageView class]]) {
      view.alpha = 0;
      break;
    }
  } 
}

score -1 · Answer 12 · answered Jun 20 '13 at 10:17

-1

You can use

  [[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"someImage.png"]forState:UIControlStateNormal];

on iOS 5+ to get rid of the line.

answered Jun 20 '13 at 10:17

Andrew

3,166
21
32

This hides the search text input field instead of the bar's bottom line. – Andreas Ley Sep 02 '13 at 08:39

DeyaEldeen · Answer 13 · 2018-10-15T22:21:35.810

-1

what worked with me is, setting the searchbar barTintColor as the navbar color

    searchBar.barTintColor = UIColor.colorWithHexString(hexStr: "479F46")

after testing, it solves the problem in both iOS 10.x and 11.x

GIF :

edited Oct 15 '18 at 22:21

answered Oct 15 '18 at 22:15

DeyaEldeen

10,847
10
42
75

Customize UISearchBar: Trying to get rid of the 1px black line underneath the search bar

13 Answers13

Why:

Solution:

XCode 10.1 Swift 4.2

Linked