Custom UITextField clear button

Question

Is it possible to customize the image of the clear button in a UITextField? I have a dark textfield background and the "x" is not visible enough.

Here is the [link to my solution](http://stackoverflow.com/a/39905621/3385411) in Swift 3. It should work for your purpose. — Andi, Oct 06 '16 at 21:10

score 52 · Accepted Answer · edited Mar 19 '13 at 15:20

52

You can set your own custom clear button to the text field's rightView property. Make sure set the rightViewMode property to UITextFieldViewModeWhileEditing or UITextFieldViewModeAlways, whatever makes sense for your case.

If the button's position isn't right for your need, you can subclass UITextField and override the rightViewRectForBounds: method.

The documentation says the default for the clearButtonMode property is UITextFieldViewModeNever, but I suspect Interface Builder may set it to UITextFieldViewModeWhileEditing - Make sure you set it to the "never" value so it doesn't appear.

All these properties are documented in UITextField Class Reference.

edited Mar 19 '13 at 15:20

Martin Lockett

2,275
27
31

answered Feb 11 '12 at 10:22

Danra

9,546
5
59
117

3

This should be easier than subclassing UITextField as Sebastian proposed. – Francesco Feb 11 '12 at 10:26
5

Note: It seems that `rightViewMode` and `clearButtonMode` have `UITextFieldViewModeAlways` behave differently. The latter won't show the view when the field is blank, whereas the former will. – samvermette Nov 15 '12 at 06:31
5

The rightView property will only be a view. You will have to add a UIButton and implement your own clear methods still. – wL_ Jan 29 '14 at 21:26
samvermette's comment applies to UITextFieldViewModeWhileEditing too. I'm having to look for a new solution in order to get the usual clear button behavior of hiding when the field is blank. :/ – SilithCrowe Dec 05 '14 at 21:42
1

Amazing that a 7 year old answer can help me. Thank you. The rightViewRectForBounds with current swift becomes override func rightViewRect( forBounds bounds: CGRect ) -> CGRect – Jason Feb 21 '19 at 18:56
1

@Jason Great, glad to help seven years later! :) – Danra Feb 23 '19 at 16:30

score 30 · Answer 2 · answered Jun 05 '14 at 09:54

30

You can access that property using KVO:

UIButton *clearButton = [myTextField valueForKey:@"_clearButton"];
[clearButton setImage:[UIImage new] forState:UIControlStateNormal];

answered Jun 05 '14 at 09:54

Laszlo

2,803
2
28
33

smooth! does apple like stuff like this? because all other solutions i've seen so far involved creating a new buttom within a view and setting it as rightview on the uitextfield – Maximilian Körner Aug 21 '14 at 09:05
1

@MaximilianKörner I used this and other KVO-s to access inaccessible properties in our application, and it released to the store without any problems. – Laszlo Sep 12 '14 at 08:54
3

Risky to use this given that it can break in future OS releases. I've been bitten before. – rounak Jan 02 '15 at 16:14
@rounak even documented methods broke sometimes, you always have to count with that. – Laszlo Jan 05 '15 at 09:35
25

**Absolutely terrible idea**. We used to do something like this on UIAlertViews to access the buttons. When apple changed their implementation, all in app purchases stopped working and we were left with weeks of "repair work" – James Webster Nov 06 '15 at 09:51
@JamesWebster It worked from perfectly 5.0 to 9.1 while lots of documented workarounds stopped working in this interval. I still prefer KVO an Apple UI element than implementing a custom objects whats also going to break after time. – Laszlo Nov 06 '15 at 10:15
1

`I still prefer KVO an Apple UI element than implementing a custom objects whats also going to break after time.` - At least when documented features are changed, the changes themselves are documented. This means you can make any necessary changes *before* they break for your users. – James Webster Nov 06 '15 at 10:18
@JamesWebster thats true, but you can also fix not documented changes before major OS releases via testing on prerelease OS versions (especially on GMs). – Laszlo Nov 06 '15 at 10:23
You also need to set the image for .highlighted state – dr OX Aug 18 '17 at 11:53
@JamesWebster UIKit is mostly NOT KVO compliant. https://stackoverflow.com/a/6114395/1442541 – evya Sep 22 '20 at 03:04

score 8 · Answer 3 · edited May 01 '18 at 13:42

Tested iOS7.0 - 8.4

It is possible to update the backgroundImage of all clear buttons using the following UIAppearance method. Unfortunately you cannot update the image of the button:

UIButton *defaultClearButton = [UIButton appearanceWhenContainedIn:[UITextField class], nil];
[defaultClearButton setBackgroundImage:[UIImage imageNamed:@"clearButtonBkg1.png"] forState:UIControlStateNormal];

Using the following images, this results in the following clear button:

White background image @3x:

Note: This will update the background image of ALL buttons contained in textfields

score 3 · Answer 4 · answered Jun 07 '17 at 16:57

3

Swift 3

let customClearButton = UIButton.appearance(whenContainedInInstancesOf: [UITextField.self])
customClearButton.setBackgroundImage(UIImage(named: "custom_cb"), for: .normal)

answered Jun 07 '17 at 16:57

Claus

5,662
10
77
118

score 2 · Answer 5 · answered Sep 02 '16 at 12:57

Swift 2.2+ / iOS 9+ version of @Brody Robertson's answer:

let defaultClearButton = UIButton.appearanceWhenContainedInInstancesOfClasses([UITextField.self])
defaultClearButton.setBackgroundImage(UIImage(named: "ClearIcon"), forState: UIControlState.Normal)

score 2 · Answer 6 · edited May 23 '17 at 11:54

2

depends on @Tuss László's answer

Swift 3.0

myTextField.clearButtonMode = .whileEditing
if let clearButton = myTextField.value(forKeyPath: "_clearButton") as? UIButton {
    clearButton.setImage(UIImage(named:"myImage"), for: .normal)
    clearButton.setImage(UIImage(named:"myImage"), for: .highlighted)
}

But really use it carefully. If Apple change implementations in future iOS releases, it would not be work

edited May 23 '17 at 11:54

Community

1
1

answered Mar 14 '17 at 08:50

Pavel Volobuev

149
5

4

using private API is a no go ! – leviathan Apr 24 '17 at 11:46
In Xcode 13 still worked. – Ben K. May 10 '22 at 04:19

score 0 · Answer 7 · answered Feb 11 '12 at 10:08

One approach would be to create a custom UITextField that has your desired image as a subview and clears the parent text field when tapped. You disable the default button and add your custom behavior in this custom text field.

This should get you started. If there are any more concrete questions, feel free to edit your question or comment here if it's a minor problem.

Custom UITextField clear button

7 Answers7

Linked