The New Form Controls:
Checkbox

The first of the new form controls for WebKit has just been turned on in the latest WebKit tree. Because it is the simplest of the controls, I converted checkbox first. This new control can be completely styled via CSS, so you can decide exactly how the checked, hovered, pressed, focused and disabled states of the checkbox look.

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, -webkit-appearance. All you have to do to turn a widget into a blank slate is to set this property’s value to none.

Some controls are 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, e.g., if you set the border and background of a button. Others, like checkbox, are going to refuse to “fall off the cliff” unless you explicitly turn off the -webkit-appearance property. The choice of when to disable the Aqua look is going to be chosen to match other browsers (and Internet Explorer in particular).

The new checkboxes in Safari are inline blocks by default. Therefore you can set borders, background images, and background colors. Support for the :enabled, :disabled, and :checked pseudo-classes has been added to the engine so that you can easily write CSS rules to change the checkbox’s appearance for the appopriate states.

In order to make the checkbox behave properly with selection and mouse tracking, I also fixed one of the bugs that has been plaguing users of contentEditable divs in Safari, namely that selection was being cleared when you moused down on images, links, buttons and controls. This bug has now been fixed so the the selection will not clear when you mouse down on these types of objects.