This is a testcase for Mozilla bug 163174.
The following is a list of the cursor styles supported by the CSS W3C recommendations. All but the cursor:url(uri) designation are supported by both Internet Explorer 4+ and Mozilla/Netscape 6+. Also see the screenshot of Mac cursors that was originally attachment 40598.
The appropriate cursor styles are applied to each table cell. If you're using a current version browser, you'll see the cursor styles in action as you hover over each cell.
Cursor | Style Property | Description |
---|---|---|
cursor:auto | This is the default. It allows the browser to determine which cursor to display based on context. | |
cursor:crosshair | A simple crosshair image will display as the cursor. | |
cursor:default | Platform-dependent default cursor. Most often displays as an arrow. | |
cursor:help | Indicates help is available for the object under the cursor. | |
cursor:move | Indicates something is to be moved. | |
IE:
NN: |
For IE 4+: For
IE 6 & NN: |
Indicates a link. Pointer only works for IE 6+ and NN 6+. |
cursor:text | Indicates text that may be selected. | |
cursor:wait | Indicates the user must wait due to a busy system or program. | |
IE:
NN: |
cursor:*-resize | Directional arrows which indicate an edge is to be moved. The * must be replaced with N, S, E, W, NE, SE, NW, or SW, each of which represents a compass location where the movement begins. (Examples below.) |
IE:
NN: |
cursor:n-resize | |
IE:
NN: |
cursor:ne-resize | |
IE:
NN: |
cursor:e-resize | |
IE:
NN: |
cursor:se-resize | |
IE:
NN: |
cursor:s-resize | |
IE:
NN: |
cursor:sw-resize | |
IE:
NN: |
cursor:w-resize | |
IE:
NN: |
cursor:nw-resize | |
cursor:url(uri) |
The custom cursor is retrieved from the designated location (uri). A list of cursors should be specified, followed by a standard cursor designation. Then, if the user's browser cannot handle the first cursor, it will attempt to use the second, and so on. If the browser can't handle any user-defined cursor, it will use the generic cursor at the end of the list. IE 6 supports cursors of type .CUR and .ANI. URL-specified cursors are not yet supported by Netscape (bug 38447) and the alternate cursor does not load (bug 77974). |
The following are additional cursor styles proposed for CSS3. Most are already supported by IE6.
Cursor | Style Property | Description |
---|---|---|
IE:
|
cursor:progress | Indicates that a program is running in the background. The program does not affect user interaction. See cursor: -moz-spinning for a Mozilla equivalent. |
IE:
|
cursor:all-scroll | Indicates that the page can be scrolled in any direction. |
IE:
|
cursor:col-resize | Indicates the item or column can be resized horizontally. |
IE:
|
cursor:row-resize | Indicates the item or row can be resized vertically. |
IE:
|
cursor:no-drop | Indicates the dragged item cannot be dropped at the present cursor location. |
IE:
|
cursor:not-allowed | Indicates that the requested action will not be carried out. |
IE:
|
cursor:vertical-text | Indicates editable vertical text. |
|
cursor:copy | Indicates something is to be copied. Not supported by IE. See cursor: -moz-copy for Mozilla. |
|
cursor:alias | Indicates an alias or shortcut to something is to be created. Not supported by IE. See cursor: -moz-alias for Mozilla. |
|
cursor:cell | Indicates that a cell or set of cells may be selected. Not supported by IE. See cursor: -moz-cell for Mozilla. |
|
cursor:context-menu | A context menu is available for the object under the cursor. |
Some additional cursors that were mentioned in earlier CSS3 drafts:
Cursor | Style Property | Description |
---|---|---|
|
cursor:grab | Indicates that you can grab and drag an object. See cursor: -moz-grab for Mozilla equivalent. |
|
cursor:grabbing | Indicates that the user has grabbed something. Often rendered as a closed hand. See cursor: -moz-grabbing for a Mozilla equivalent. |
Additional cursors that are supported by Mozilla (in 1.4):
Cursor | Style Property | Description |
---|---|---|
|
cursor: -moz-spinning | Indicates that a program is running in the background, but can still interact with the user. Similar to CSS3 progress cursor. |
|
cursor: -moz-grab | Indicates that you can grab and drag an object. Anticipates the CSS3 grab cursor. |
|
cursor: -moz-grabbing | Indicates that the user has grabbed something. Anticipates the CSS3 grabbing cursor. |
|
cursor: -moz-zoom-in | Indicates that you can zoom in on an object. Added as part of bug 189719 for the automatic image sizing feature. |
|
cursor: -moz-zoom-out | Indicates that you can zoom out on an object. |
|
cursor: -moz-copy | Indicates something is to be copied. Similar to CSS3 copy cursor. |
|
cursor: -moz-alias | Indicates an alias or shortcut to something is to be created. Similar to CSS3 alias cursor. |
|
cursor: -moz-cell | Indicates that a cell or set of cells may be selected. Similar to CSS3 cell cursor. |
|
cursor: -moz-context-menu | A context menu is available for the object under the cursor. Similar to CSS3 context-menu cursor. Is this Mac-only? |
|
cursor: -moz-count-up | A progress cursor counting up? Doesn't do anything on Windows. |
|
cursor: -moz-count-down | A progress cursor counting down? Doesn't do anything on Windows. |
|
cursor: -moz-count-up-down | A progress cursor counting up and back down? Doesn't do anything on Windows. |
|
unknown | A cursor that shows text is being moved to a new location by dragging. Appears in Composer but I cannot find a CSS reference for it. |
|
unknown | Indicates that the requested action will not be carried out. Appears when dragging various things, such as bookmarks, but I cannot find a CSS reference for it. |