Changing Placeholder Text Color with Swift

Changing Placeholder Text Color with Swift

You can set the placeholder text using an attributed string. Just pass the color you want to the attributes parameter.

Swift 5:

let myTextField = UITextField(frame: CGRect(x: 0, y: 0, width: 200, height: 30))
myTextField.backgroundColor = .blue
myTextField.attributedPlaceholder = NSAttributedString(
    string: "Placeholder Text",
    attributes: [NSAttributedString.Key.foregroundColor: UIColor.white]
)

Swift 3:

myTextField.attributedPlaceholder = NSAttributedString(
    string: "Placeholder Text",
    attributes: [NSAttributedStringKey.foregroundColor: UIColor.white]
)

Older Swift:

myTextField.attributedPlaceholder = NSAttributedString(
    string: "Placeholder Text",
    attributes: [NSForegroundColorAttributeName: UIColor.white]
)

Change placeholder text color on swift

You can set the placeholder text using an Attributed string. Set color to attributes
Property.

   textField.attributedPlaceholder = NSAttributedString(string:"placeholder text",
   attributes:[NSForegroundColorAttributeName: UIColor.yellowColor()])

Swift 5

textField.attributedPlaceholder = NSAttributedString(string:"placeholder text", attributes:[NSAttributedString.Key.foregroundColor: UIColor.yellow])

SwiftUI. How to change the placeholder color of the TextField?

There is no api for it (yet). BUT YOU CAN:

Use a custom placeholder modifier to show any view as the holder of any other view! e.g:

TextField("", text: $text)
    .placeholder(when: text.isEmpty) {
        Text("Placeholder recreated").foregroundColor(.gray)
}

It's a simple ZStack that you can in a View extension like:

extension View {
    func placeholder<Content: View>(
        when shouldShow: Bool,
        alignment: Alignment = .leading,
        @ViewBuilder placeholder: () -> Content) -> some View {

        ZStack(alignment: alignment) {
            placeholder().opacity(shouldShow ? 1 : 0)
            self
        }
    }
}

Now you can apply any kind of style to the placeholder like this gradient placeholder with image:

✅ If you are interested, Here is how to apply resizable gradient on any view

---

The Art of the simplicity

Most of the time you need to pass just a string and a gray placeholder like:

TextField("", text: $text)
    .placeholder("Placeholder", when: text.isEmpty)

you can write a simple wrapper around the above extension for it:

extension View {
    func placeholder(
        _ text: String,
        when shouldShow: Bool,
        alignment: Alignment = .leading) -> some View {
            
        placeholder(when: shouldShow, alignment: alignment) { Text(text).foregroundColor(.gray) }
    }
}

Just like that /h4>

How to change text color of PlaceHolder in UISearchBar? (iOS 13)

As you already mentioned, your code works only in viewDidAppear, which makes the placeholder to flicker from the default gray color to the preferred color.

However, there seem to be a time before viewDidAppear (I couldn't figure it out when exactly), to change the placeholder before the view actually appears.

I suppose, this may be connected to how iOS handles light/dark mode and/or an iOS bug.

The solution I came out with that works around the issue:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if #available(iOS 13.0, *) {
        let placeholder = NSAttributedString(string: "Search",
                                             attributes: [
                                                .foregroundColor: UIColor.white
        ])
        let searchTextField = searchBar.searchTextField

        // Key workaround to be able to set attributedPlaceholder
        DispatchQueue.global().async {
            DispatchQueue.main.async {
                searchTextField.attributedPlaceholder = placeholder
            }
        }
    }
}

There seem to be no performance and/or other downside to this method.

If anybody else comes with a better approach, feel free to collaborate.

iPhone UITextField - Change placeholder text color

You can override drawPlaceholderInRect:(CGRect)rect as such to manually render the placeholder text:

- (void) drawPlaceholderInRect:(CGRect)rect {
    [[UIColor blueColor] setFill];
    [[self placeholder] drawInRect:rect withFont:[UIFont systemFontOfSize:16]];
}

---

Related Topics