UISearchBar with a white background is impossible?

Question

I really thought it would be easy to set the background color of my UISearchBar's text field to white. But no matter what I try, it always stays offwhite / light gray (#efeff0).

import UIKit

class ViewController: UIViewController {
  private let searchController = UISearchController()

  override func viewDidLoad() {
    super.viewDidLoad()
    navigationItem.title = "Hello World"
    view.backgroundColor = #colorLiteral(red: 0.9588784575, green: 0.9528519511, blue: 0.9350754619, alpha: 1)
    searchController.searchBar.searchTextField.backgroundColor = .white
    navigationItem.searchController = searchController
  }
}

How can I make the search bar have a pure white background color? App is iOS 13+, if that helps.

Tiny test project: https://github.com/kevinrenskers/WhiteSearch.

Answer 1

It's possible. Set the background of the search field with a white image.

let size = CGSize(width: searchController.searchBar.frame.size.width - 12, height: searchController.searchBar.frame.size.height - 12)
let backgroundImage = createWhiteBG(size)!
let imageWithCorner = backgroundImage.createImageWithRoundBorder(cornerRadiuos: 10)!

searchController.searchBar.setSearchFieldBackgroundImage(imageWithCorner, for: UIControl.State.normal)

If you don't want to input an image to app. Try this for create one programmatically.

func createWhiteBG(_ frame : CGSize) -> UIImage? {
    var rect = CGRect(x: 0, y: 0, width: 0, height: 0)
    rect.size = frame
    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()
    context?.setFillColor(UIColor.white.cgColor)
    context?.fill(rect)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

extension UIImage {
    func createImageWithRoundBorder(cornerRadiuos : CGFloat) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(self.size, false, scale)
        let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.size)
        let context = UIGraphicsGetCurrentContext()

        let path = UIBezierPath(
            roundedRect: rect,
            cornerRadius: cornerRadiuos
        )
        context?.beginPath()
        context?.addPath(path.cgPath)
        context?.closePath()
        context?.clip()
        self.draw(at: CGPoint.zero)
        context?.restoreGState()
        path.lineWidth = 1.5
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

Answer 2

Here is My complete Custom Search Bar Which you can define the searchbar backgroundColor and TextField background Color

Tested

import Foundation

class SearchBar: UISearchBar {

    override init(frame: CGRect) {
        super.init(frame: frame)

        makeUI()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)

        makeUI()

    }

    private func makeUI( ) {

        //SearchBar BackgroundColor
        self.backgroundImage = UIImage(color: UIColor.white)

        //Border Width
        self.layer.borderWidth = 1

        //Border Color
        self.layer.borderColor = UIColor("DEDEDE")?.cgColor

        //Corner Radius
        self.layer.cornerRadius = 3
        self.layer.masksToBounds = true

        //Change Icon
        self.setImage(UIImage(named: "search")?
            .byResize(to: CGSize(width: 30, height: 30)), for: .search, state: .normal)

        if let searchTextField = self.value(forKey: "searchField") as? UISearchTextField {

            //TextField Background !!!!!
            searchTextField.backgroundColor = UIColor.white

            //TextField Font
            searchTextField.font = UIFont(name: "Poppins-Regular", size: 21)
            searchTextField.textColor = .black
        }

    }

}

Answer 3

Try this ... Change colors and images according to your preference  

 DispatchQueue.main.async {
            searchBar.backgroundImage = UIImage()

            for s in searchBar.subviews[0].subviews {
                if s is UITextField {
                    s.layer.borderWidth = 1.0
                    s.layer.borderColor = UIColor.lightGray.cgColor

                }
            }

            let searchTextField:UITextField = searchBar.subviews[0].subviews.last as? UITextField ?? UITextField()
            searchTextField.layer.cornerRadius = 10
            searchTextField.textAlignment = NSTextAlignment.left
            let image:UIImage = UIImage(named: "search")!
            let imageView:UIImageView = UIImageView.init(image: image)
            searchTextField.leftView = nil
            searchTextField.placeholder = "Search..."
            searchTextField.font = UIFont.textFieldText
            searchTextField.rightView = imageView
            searchTextField.rightViewMode = UITextField.ViewMode.always

        }