User interface

Cursor design

The design of the cursor may be changed as the user places it over a particular element. The 'cursor' property takes a value of 'auto' (the default), 'crosshair', 'default' (not the default), 'pointer', 'move', may be resized in a given compass direction ('e-resize', 'ne-resize', 'nw-resize', 'n-resize', 'se-resize', 'sw-resize', 's-resize' and 'w-resize'), 'text',' 'wait' or 'help', or may take a URL that identifies an image to show instead. Some of the more common representations are shown below:

Outline highlights

Lines around objects may be added to highlight a default or currently selected item, particularly within forms. Outlines are similar to borders, except that they do not occupy additional space, and are the same shape as the object (not necessarily rectangular).

An outline can have a style, with the same options as the border styles (default 'none'), a colour (with 'invert' added to the normal colour list, and made the default setting) and a width (default 'medium'). The 'outline-style', 'outline-color' and 'outline-width' properties apply to these characteristics. Pseudo-classes called ':focus' and ':active' are used to identify an element that has the current focus, or is currently active:

:active    { outline-style: dotted ;
             outline-color: red ;
             outline-width: 2pt }

These three properties can be combined within the 'outline' property, which specifies first the colour, then the style, and finally the width:

name:focus { outline: dashed }

:active    { outline: red dotted 2pt }