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
Add a comment |
6 Answers
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.
1 Comment
Legoless
This no longer works under iOS 7. Instead you must create the button with a frame.
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 = @""; } 
1 Comment
Balazs Nemeth
I think you should use the
image parameter instead of the created "clear-button" UIImage.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 = "" } } 
1 Comment
Petter Friberg
Please don't add the same answer 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?
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) } } 
2 Comments
Andy Weinstein
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: stackoverflow.com/a/54213781/826946
Andy Weinstein
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
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 
Comments
yourTextField.overrideUserInterfaceStyle = .dark
