Next / Previous / Contents / TCC Help System / NM Tech homepage

19. User interface options

CSS allows you to control several features of the user interface:

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: Crosshair cursor.

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: Arrows pointing in four directions.

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: South-pointing arrow.

text

A cursor for selecting text, something like this: I-beam cursor.

wait

The cursor urging the reader to be patient, typically a watch or hourglass image such as: Wristwatch cursor.

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; }