19. User interface options

19.1. The `cursor` property

You can select what kind of cursor appears when the pointer is over an element by using the cursor property. Values may be any of:

uri: Retrieve the cursor image from a URI.
auto: Use a cursor appropriate for the type of the element.
crosshair: A crosshair cursor, something like:
default: The default cursor, usually an arrow.
pointer: The cursor that identifies a link.
move: A cursor showing something that is being moved, something like:
n-resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-resize | nw-resize: Produces a cursor for resizing a window in one of the eight compass directions. For example, s-resize is for resizing the bottom (south side) of a window, and might look like this:
text: A cursor for selecting text, something like this:
wait: The cursor urging the reader to be patient, typically a watch or hourglass image such as:

19.2. Selecting colors to match UI components

In addition to the colors described in Section 6.2, “Specifying colors”, you can use any of the special color names from this list to select a color from the color scheme of the agent's user interface context.

`ActiveBorder`	The border around an active window.
`ActiveCaption`	The caption of an active window.
`AppWorkspace`	In an interface with multiple documents, this is the background color behind those documents' windows.
`Background`	The desktop background.
`ButtonFace`	The foreground color for three-dimensional display elements.
`ButtonHighlight`	The highlight color on the sides of 3-d elements that are facing the apparent light source.
`ButtonShadow`	The color on the sides of 3-d elements that are facing away from the apparent light source.
`CaptionText`	The color of the text in captions and scrollbar arrow boxes.
`GrayText`	The color of text on a disabled control.
`Highlight`	The color of selected items in a control.
`InactiveBorder`	The border color of an inactive window.
`InactiveCaption`	The caption color of an inactive window.
`InactiveCaptionText`	The text caption color of an inactive window.
`InfoBackground`	The background color for tooltip controls.
`InfoText`	The text color for tooltip controls.
`Menu`	The background color of menus.
`MenuText`	The text color of menus.
`Scrollbar`	The color of the “trough” area of a scrollbar, not occupied by a scroll thumb.
`ThreeDDarkShadow`	The darker shadow color of a three-dimensional element, on sides facing away from the apparent light source.
`ThreeDFace`	The foreground color of a three-dimensional element.
`ThreeDHighlight`	The highlight color of a three-dimensional element.
`ThreeDLightShadow`	The lighter shadow color of a three-dimensional element, on sides facing toward the apparent light source.
`ThreeDShadow`	Same as `ThreeDDarkShadow`.
`Window`	The window background color.
`WindowFrame`	The color of window frames.
`WindowText`	The color of text in windows.

19.3. Dynamic outlines

CSS allows you to display an outline around an element. These outlines are different from borders: they don't affect the spacing of other elements, and they may not necessarily be rectangular.

There are three outline properties and one combination property:

outline-color

Gives the color of the dynamic outline. In addition to the colors described in Section 6.2, “Specifying colors”, you can also specify the value invert, which shows the outline as the inverse of the existing color, so it will show up regardless of the color scheme.

outline-width

Specifies the width of a dynamic outline. The values are the same as those for the border-width property described in Section 15.6, “The border properties”.

outline-style

Specifies the style of the dynamic outline. The values are the same as those for the border-style properties described in Section 15.6, “The border properties”, except that the hidden value is not allowed.

outline

This is a combination property that allows you to specify any of the color, width, and style values at once. For example, this rule sets up a wide dashed red border around the div element whose id is n23:

div#n23 { outline: red dashed wide; }

Styling Web pages with CSS-2