Welcome to Particletree!

If you’ve been viewing and creating sites around Apple’s new Safari 3 beta (perhaps for some iPhone development?), then you’ve probably noticed that some of the select elements aren’t following that typical aqua look that’s so unique to Safari. Here’s a picture for those not in the know:

In this new beta, designers can now make some CSS customizations to Safari’s form elements thanks to changes that were started back in August of 2005.

The basic idea behind all of the upcoming form controls is that the engine implements the behavior and logic of the control, and if a native (i.e., Aqua) look is desired, then the painting is done by a theme API. The native appearance is controlled via a new experimental CSS property, -khtml-appearance. All you have to do to turn a widget into a blank slate is to set this property’s value to none.

— The New Form Controls

Some of these flexible features for form controls have been in WebKit for some time and I’m happy to see them finally make their way into a Safari release. While most of the attention out there seems to focus on the changes made to the resizable textarea element, we’re going to focus on the select element today.

Falling Off the Cliff

In that announcement back in the day, Hyatt mentioned that some controls were going to naturally discard the Aqua look if you “fall off the cliff” by customizing the control to the point where the Aqua look can no longer be maintained. There are three ways to remove the aqua look on select elements in Safari 3.

1. Specify a Border
2. Specify a Background
3. Turn KHTML Appearance Off

Here’s a screenshot from some tests I made showing this in action and the inline CSS styles I used to accomplish the changes.

One thing I’ve noticed in my tests is that there’s a slight gradient that’s still applied to the select elements that goes from dark to light regardless of the background setting. I’m hoping this will be removed entirely so that designers will have a better blank canvas to play with these, but I imagine it was tough making them not as pretty in the first place.

In regards to the KHTML Appearance property, it’s probably new for a lot of you and I while I don’t want to really get into here because I have plans to cover it when I write about styling radio and checkboxes in Safari 3, know that it’s similar to the -moz and -webkit properties.

What Can You Now Change?

For those that are impatient, here’s a quick overview of the changes allowed and not allowed with the non aqua select elements.

• Font-Family can be changed in the Non Aqua versions.
• Font-Sizes are available (aqua drop downs only have 3 fixed sizes)
• Height and Line Height can be changed.
• Padding CANNOT be changed.

For those that want to try some of these changes for yourself, please download the test examples I created or view this web page if you have Safari 3 or this screenshot if you don’t.