UITextField clearButtonMode color

Question

can I change the color of the clearButtonMode on a textField?

theTextField.clearButtonMode = UITextFieldViewModeWhileEditing

shows an x that is grey dark color to delete the textField,

but can i show this button with white color?

thanks

score 33 · Accepted Answer · edited May 09 '14 at 09:07

You'll need to create your own clear button image in this case. I would suggest taking a screenshot of the clear button and editing in photoshop.

You can take that image and create a UIButton with the image dimensions. From there you can set it as the UITextField's rightView. Like so:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"clear_button.png"] forState:UIControlStateNormal];
[button setFrame:CGRectMake(0.0f, 0.0f, 15.0f, 15.0f)]; // Required for iOS7
theTextField.rightView = button;
theTextField.rightViewMode = UITextFieldViewModeWhileEditing;

I typed that without syntax checking and what not so you'll want to check it out before running it. You'll also want to replace clear_button.png with whatever your image name is.

You'll also need to write your own method to clear the text field.

This no longer works under iOS 7. Instead you must create the button with a frame. — Legoless, Mar 05 '14 at 15:47

score 8 · Answer 2 · edited Mar 06 '16 at 00:46

8

A cleaner way is to implement a category on UITextField with this method:

- (void)modifyClearButtonWithImage:(UIImage *)image {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:image forState:UIControlStateNormal];
    [button setFrame:CGRectMake(0.0f, 0.0f, 15.0f, 15.0f)];
    [button addTarget:self action:@selector(clear:) forControlEvents:UIControlEventTouchUpInside];
    self.rightView = button;
    self.rightViewMode = UITextFieldViewModeWhileEditing;
}

-(IBAction)clear:(id)sender{
    self.text = @"";
}

edited Mar 06 '16 at 00:46

AcidicSkittles

4,610
1
15
14

answered Nov 13 '14 at 21:06

mukaissi

2,441
1
21
12

I think you should use the `image` parameter instead of the created "clear-button" UIImage. – Balazs Nemeth Aug 12 '15 at 23:15

score 7 · Answer 3 · edited Apr 25 '19 at 20:35

7

Swift version :

extension UITextField {

    func modifyClearButtonWithImage(image : UIImage) {
        let clearButton = UIButton(type: .Custom)
        clearButton.setImage(image, forState: .Normal)
        clearButton.frame = CGRectMake(0, 0, 40, 40)
        clearButton.contentMode = .ScaleAspectFit
        clearButton.addTarget(self, action: #selector(UITextField.clear(_:)), forControlEvents: .TouchUpInside)
        self.rightView = clearButton
        self.rightViewMode = .WhileEditing
    }

    func clear(sender : AnyObject) {
        self.text = ""
    }

}

edited Apr 25 '19 at 20:35

Julian Fortune

172
1
7

answered Oct 03 '16 at 12:22

Mohammad Sadiq

5,070
28
29

Please don't add the [same answer](http://stackoverflow.com/a/39831522/5292302) to multiple questions. Answer the best one and flag the rest as duplicates. See [Is it acceptable to add a duplicate answer to several questions?](http://meta.stackexchange.com/questions/104227/is-it-acceptable-to-add-a-duplica‌te-answer-to-several-questions) – Petter Friberg Oct 03 '16 at 12:32

score 5 · Answer 4 · edited Feb 05 '21 at 10:17

5

Swift 4.1 version

extension UITextField {
    func modifyClearButtonWithImage(image : UIImage) {
        let clearButton = UIButton(type: .custom)
        clearButton.setImage(image, for: .normal)
        clearButton.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
        clearButton.contentMode = .scaleAspectFit
        clearButton.addTarget(self, action: #selector(UITextField.clear(sender:) ), for: .touchUpInside)
        self.rightView = clearButton
        self.rightViewMode = .whileEditing
    }

    @objc func clear(sender : AnyObject) {
        self.text = ""
        sendActions(for: .editingChanged)
    }
}

edited Feb 05 '21 at 10:17

V-rund Puro-hit

5,518
9
31
50

answered Jul 11 '18 at 11:40

Tony Macaren

437
5
11

Works great! If you need a tinted template image, then you can define the tintColor as clearButton.tintColor = yourTintColor and use an image template as described here: https://stackoverflow.com/a/54213781/826946 – Andy Weinstein May 24 '20 at 19:35
Actually - this doesn't seem to behave exactly like the built-in cancel button, because it appears even when the textfield is empty (in editing mode, but empty). You need to also take care of setting textField.rightView?.isHidden appropriately to fully emulate standard behavior – Andy Weinstein May 24 '20 at 19:46

score 3 · Answer 5 · edited Nov 15 '16 at 06:20

3

At the time you're configuring the textField, use:

let clearButton : UIButton = textField.value(forKey: "_clearButton") as! UIButton
let image = UIImage(named: "ClearWhite")

clearButton.setImage(image, for: .normal)
clearButton.backgroundColor = UIColor.clear

edited Nov 15 '16 at 06:20

mjk

2,443
4
33
33

answered Nov 15 '16 at 05:36

Sayali Shinde

96
3

score 0 · Answer 6 · answered Nov 11 '22 at 00:08

0

yourTextField.overrideUserInterfaceStyle = .dark

answered Nov 11 '22 at 00:08

Dian

115
3
12

UITextField clearButtonMode color

6 Answers6

Linked