Jun
16
2010

A Better Looking Text Field

Since version 4.0, Safari’s URL text field has had a slightly different, and in my option, much more attractive style of text field:

Text Fields

There is no option in Interface Builder to duplicate this control, so I created an NSTextField subclass to mimic the look.¬†The open source¬†Notational Velocity has a similar style text field, but it uses images to achieve the affect, which really isn’t necessary if we just do a little drawing in code. And maybe one day we’ll get an iPhone 4-like retina display on the desktop and resolution-independent controls like this will make a difference.

You can download the NSTextField subclass, SSTextField here:

SSTextField

It’s just a drop-in replacement. Add the .h and .m files to your Xcode project, then set the custom class of the text fields you want to have the new look in IB.

It should work on regular and small sizes, although some of the spacing starts to get a little weird at the mini size. I haven’t had the need to use it at that size so I haven’t worried about it. If someone feels like fixing it up so it does work I’d be happy to patch the files.

The other thing that isn’t implemented is the rounded search text field look. Again, I haven’t had the need for it yet, but submissions are welcome!

7 Comments on “A Better Looking Text Field”

  • June 16th, 2010 5:32 pm

    As an aside, “SS” isn’t the best name space for custom classes.
    First of all Apple reserves all two letter class namespaces for itself.
    And secondly, it’s a a bit of an unfortunate abbreviation in historical terms: http://en.wikipedia.org/wiki/Schutzstaffel

  • July 2nd, 2010 2:17 pm

    Thank you for putting this up. I love examples!

  • July 2nd, 2010 2:30 pm

    Point taken – although in this case SS stands for Stunt Software, if it brings up negative associations for people that’s enough of a reason to change it for future code that I’ll post here. I hadn’t heard before this year’s WWDC that Apple was now reserving all two-letter prefixes… maybe one day we’ll get actual namespaces!

  • December 10th, 2011 3:08 pm

    @flynn: as is “NS”, which is the common abbreviation of “National-Socialism”, thus not that far from “SS”. ;)

    @Dan Messing: Thanks for the great examples and source code! Keep up the great work!

  • February 6th, 2012 2:33 pm

    Dan, thanks a lot for the examples! that looks like exactly what I was looking for!

    And since I’m already here:

    @Nobody: Unlike SS, the abbreviation NS doesn’t have any commonly known negative association attached to it that would be instantly invoked when you see or hear it.

    Having said this, I don’t think there’s anything wrong with using SS in programming code (unless it has to do anything with SS, of course).

  • November 19th, 2012 12:11 pm

    Would it be possible to put a license on this code (MIT/BSD/Apache)? I’d love to use this to display some pretty inputs but no-license = no bueno when it comes to using 3rd party components (plus the footer of your site does say “I’ll sue. Don’t test me.” ;)

  • November 19th, 2012 12:25 pm

    Chris,

    You’re right, I should post a license somewhere. But please feel free to use the code. Attribution would be nice, but is not necessary. Redistributing without proper attribution = bad.

    Oh, and I definitely won’t sue :)

    Dan

Comment on this Post