How Can I Customize the Background Color and Other Properties of UITextField Inside a UISearchBar?

Question

I’m trying to customize the appearance of a UITextField inside a UISearchBar. Specifically, I want to change the background color and other style properties. I am using the following code to make some adjustments

func configureMarkerSearchBar(with placeholder: String) {
backgroundColor = .clear
tintColor = .clear
searchTextField.layer.cornerRadius = CGFloat(SearchBarConstants.searchBarLayerRadius)
searchTextField.layer.masksToBounds = true
sizeToFit()

if let textField = value(forKey: SearchBarConstants.searchFieldKey) as? UITextField {
    let attributedString = NSAttributedString(string: placeholder,
                                              attributes: [NSAttributedString.Key.foregroundColor:
                                                  SearchBarConstants.searchBarTextInputColor])
    textField.attributedPlaceholder = attributedString
    textField.font = UIFont.regularDMSans(of: SearchBarConstants.textFieldFontSize)
    textField.layer.cornerRadius = SearchBarConstants.searchBarCornerRadius
    textField.translatesAutoresizingMaskIntoConstraints = false
    textField.backgroundColor = .clear
    textField.tintColor = .clear
    NSLayoutConstraint.activate([
        textField.heightAnchor.constraint(equalToConstant: CGFloat(46)),
        textField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0),
        textField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 0),
        textField.centerYAnchor.constraint(equalTo: centerYAnchor, constant: 0)
    ])
    searchTextField.clipsToBounds = true
    
    if let searchIcon = UIImage(named: SearchBarConstants.iconSearch) {
        let imageView = UIImageView(image: searchIcon)
        searchIcon.withRenderingMode(.alwaysTemplate)
        searchIcon.withTintColor(SearchBarConstants.searchBarTextInputColor)
        let paddingView = UIView(frame: CGRect(x: 0, y: 0,
                                               width: SearchBarConstants.searchIconOffset + searchIcon.size.width,
                                               height: searchIcon.size.height))
        imageView.frame = CGRect(x: SearchBarConstants.searchIconOffset, y: 0,
                                 width: searchIcon.size.width,
                                 height: searchIcon.size.height)
        paddingView.addSubview(imageView)
        textField.leftView = paddingView
        textField.leftViewMode = .always
    }
}

}

The issue I’m facing is that whenever I try to access and modify the background view of the UITextField, it always defaults to tertiarySystemFillColor instead of the custom color I set.

Has anyone encountered this issue before? How can I successfully change the background color and ensure my customizations are applied properly?

Thank you!

View Hierarchy

Has anyone encountered this issue before? How can I successfully change the background color and ensure my customizations are applied properly?

Answer 1

You can modify text field directly through searchTextField property of UISearchBar.

Example UIViewController to demonstrate customization of text field.

import UIKit

class ViewController: UIViewController {
    
    // MARK: - UISearchController
    lazy var searchBar: UISearchBar = {
        let view = UISearchBar()
        view.placeholder = "Search here..."
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        setupSearchBar()
        customizeSearchBar()
    }
    
    private func setupSearchBar() {
        view.addSubview(searchBar)
        searchBar.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            searchBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            searchBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            searchBar.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }
    
    private func customizeSearchBar() {
        searchBar.setImage(UIImage(systemName: "magnifyingglass.circle.fill"), for: .search, state: .normal)
        searchBar.searchTextField.font = .italicSystemFont(ofSize: 15)
        searchBar.searchTextField.borderStyle = .none
        searchBar.searchTextField.backgroundColor = .red
        searchBar.searchTextField.layer.cornerRadius = 24.0
    }
}

Result: