Text Field rendering

Question

I am trying to build a really simple NSTextField with Interface Builder (XCode 4), but the rendering is really weird with default values:

The only setting I changed is the border style:

My question:

How to display a neat Text Field “squared but with rounded corners”, like in Safari:

How to remove that “overflow:hidden” (sorry for the CSS description) which cuts the focus? < Interface Builder bug, fixed.

Should I design my own, image-based component?

Thank you!

Answer 1

What you've got at the top is a NSSearchField , which is designed for filtering/searching.

Likely the reason why the focus ring is cut off is because you've got it inside a box or overlapping another object. Don't do that.

There are no standard rounded-corner (as opposed to rounded-end) text fields; if you want one, you'll need to subclass NSTextField yourself, or just wait for Lion where the standard text field will have rounded corners.

Answer 2

I think I've found exactly what you're looking for. Here's what it looks like:

It's called SSTextField . Download the subclass here: http://cocoatricks.com/2010/06/a-better-looking-text-field/

Answer 3

Rounded rectangle text fields are pretty straightforward and don't require subclassing the control. Instead you can simply override the way the background CALayer of the control is drawn.

Choose the square-cornered field shape, add the QuartzCore framework to your project, and then #import <QuartzCore/QuartzCore.h> . In your controller's viewDidLoad method you'll modify the text field's layer's cornerRadius property, a la:

myTextField.layer.cornerRadius = 6.0;

Poof, rounded-rectangle text field!