Text Fields

We have recently switched over to use an engine-based implementation for <input type=text>.  In doing so, our text fields are now able to use many useful css capabilities that weren’t available before.  border-radius, border-image, and background-image are just a few that will now work with our text fields.

The implementation details are similar to the details of the button implementation.  We use -webkit-appearance: textfield to turn on the aqua text field border.  When border styling is specified, we turn off the aqua appearance.  For the editable part of the field, we use an anonymous contenteditable div. This means that we’re using the same editing engine for our text fields that we use for Mail and any other editable web content.

Also, initial measurements indicate a significant speedup in load performance for pages containing text fields.  Bring on those text field heavy pages!