Specify mouse cursors with CSS



CSS allows you to define a cursor that will be displayed at the specific element on your page. For instance, if you want to show that the clicking the element will show the context help, you can define the "help" cursor for this element.

Here are the list of cursor types you can use for the pointing device (usually, mouse). You can test each cursor by moving mouse pointer above the "Example" block:

auto Initial value. The browser determines the cursor to display based on the current context. (I.e. above the text it will be "text“ cursor, above the hyperlink it will be the ”pointer", and so on.)

Example of the auto cursor

crosshair A simple crosshair (e.g., short line segments resembling a "+" sign).

Example of the crosshair cursor

default The platform-dependent default cursor. Often rendered as an arrow.

Example of the default cursor

pointer The cursor is a pointer that indicates a link.

Example of the pointer cursor

move Indicates something is to be moved.

Example of the move cursor

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

nw-resize n-resize ne-resize w-resize   e-resize sw-resize s-resize se-resize text Indicates text that may be selected. Often rendered as an I-bar.

Example of the text cursor

wait Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

Example of the wait cursor

help Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

Example of the help cursor

url The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.

Example of the (url) cursor