NSTextField transparent background

Question

I create transparent NSTextField

self.myTextField = [[NSTextField alloc] initWithFrame:CGRectMake(backgroundView.frame.origin.x + backgroundView.frame.size.width + 20, self.projectTitle.frame.origin.y - 30.0, 100, 20)];
self.myTextField.editable = NO;
self.myTextField.bezeled = NO;
self.myTextField.drawsBackground = YES;
self.myTextField.backgroundColor = [NSColor clearColor];
self.myTextField.selectable = NO;
self.myTextField.font = [NSFont fontWithName:@"Helvetica Neue" size:16];

    [self addSubview:self.compressingTime];

And as a result text look bad.

If I set background color

    self.myTextField.backgroundColor = [NSColor colorWithCalibratedRed:0.85 green:0.85 blue:0.85 alpha:1.0];

everything looks ok

I have also tried with drawsBackground = NO; Do you guys know how to fix this?

Answer 1

The secret is setting ALL THREE of these properties on the NSTextField...

myTextField.bezeled         = NO;
myTextField.editable        = NO;
myTextField.drawsBackground = NO;

Answer 2

There is a property in the .xib file, on the interface builder window for the text field, under attribute inspector

1. Check the Display Draws Background
2. Select a background color. Select clear color for transparent background.

Answer 3

As of 10.12 you can just do:

let label = NSTextField(labelWithString: "HELLO")

Answer 4

I ended up using CATextLayer instead NSTextField.

Answer 5

Came here looking for this too, and have got the background to give me a transparent grey. Key is to not have a bezel. My code below:

NSTextField *yourLabel = [[NSTextField alloc] initWithFrame:NSMakeRect(0, 0, width , height * 1.0/3.0)];
yourLabel.editable = false;
yourLabel.bezeled = false;
[yourLabel setTextColor:[NSColor blackColor]];
[yourLabel setBackgroundColor:[NSColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.1]];

For completeness I had got the width and height earlier because they get used many times for layout:

height = self.window.frame.size.height;
width = self.window.frame.size.width;

Answer 6

You don’t have to switch to CATextLayer to effectively tell your application to use layers for the text field. You can just use this instead:

textField.drawsBackground = NO;
textField.wantsLayer      = YES;

Answer 7

I had this problem just now. I fixed it by removing a property named backgroundColor from the NSTextField's superview.

I was using backgroundColor just as a convenience getter/setter for the CALayer properties on an NSView subclass. Although this property isn't documented on NSView, it looks like I had accidentally overridden a property on NSView.

Yay for subclassing! 😒

Answer 8

The clear color will make the current view (ie)NSTextView's background as transparent hence the color of NSView which holds the NSTextView is visible.