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. enter image description here If I set background color

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

everything looks ok enter image description here I have also tried with drawsBackground = NO; Do you guys know how to fix this?

@Vervious On the second img it looks like antialiasing is on, font on the firts img is rugged. — pawelropa, Jun 20 '12 at 16:08

score 79 · Answer 1 · answered Sep 04 '13 at 17:46

79

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

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

answered Sep 04 '13 at 17:46

Alex Gray

16,007
9
96
118

Thanks, works perfectly for modifying the Apple code for programmatically populating an NSTableView – Dan Rosenstark Feb 03 '15 at 17:13
2

this only works if the superview's layer has a solid background color. @ZsoltSzatmari – mrabin Feb 20 '15 at 20:17
2

This is the best answer. When creating the NSTextView in code you have to set .isBezeled to false or your view won't be transparent due to the bezel layer. Thanks Alex! – Chris Jul 13 '17 at 11:54
2

ah the joys of AppKit, always the most intuitive solutions – Charlton Provatas Aug 13 '17 at 21:23
3

In my Xcode9 and OSX 10.13.2, `myTextField.bezeled` should be `myTextField.isBezeled`. And `myTextField.editable` should be `myTextField.isEditable`. – Todd Jan 11 '18 at 12:47

score 19 · Answer 2 · edited Oct 22 '17 at 16:26

19

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

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

edited Oct 22 '17 at 16:26

Alen Liang

529
5
13

answered Oct 02 '15 at 21:33

Gamma-Point

1,514
13
14

1

Fixed my problem by Draws Background checked and set background color to clear color – Dima Deplov Nov 09 '15 at 11:40
This, not the higher ranked solution, worked for me. – mxcl Apr 09 '18 at 01:40
Also, the border (bezel) needs to be set to "none" (the dotted box shown in the illustration) in my case. Was fussing with this for several minutes until I pulled up the illustration and saw the additional difference – Jc Nolan May 06 '22 at 15:53

Mark Bridges · Answer 3 · 2017-08-23T10:06:34.470

7

As of 10.12 you can just do:

let label = NSTextField(labelWithString: "HELLO")

edited Aug 23 '17 at 10:06

answered Aug 01 '17 at 08:38

Mark Bridges

8,228
4
50
65

score 2 · Answer 4 · answered Jan 18 '19 at 09:23

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;

score 1 · Accepted Answer · answered Aug 30 '12 at 06:15

1

I ended up using CATextLayer instead NSTextField.

answered Aug 30 '12 at 06:15

pawelropa

1,409
1
14
20

score 0 · Answer 6 · answered Oct 26 '20 at 05:05

0

I have same problem. Default appearance is empty. I try set dark mode and it work.

self.nameTextField.appearance = [NSAppearance appearanceNamed:NSAppearanceNameVibrantDark];

answered Oct 26 '20 at 05:05

Hoi Dang

1
1
2

score -2 · Answer 7 · answered Jul 23 '15 at 09:31

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!

score -4 · Answer 8 · answered Aug 29 '12 at 11:41

-4

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.

answered Aug 29 '12 at 11:41

Kakey

3,936
5
29
45

NSTextField transparent background

8 Answers8

Linked