CSS property: cursor
Description
The type of cursor to be displayed for the pointing device
This property specifies the type of cursor to be displayed for the pointing device.
Syntax
CSS 2
cursor: [ <uri>, ]* <system>;
CSS 3
cursor: [ <uri> [ <x> <y> ]? , ]* <system>;
Values
- <uri>
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 must attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the cursor keyword at the end of the list. The optional
<x>
and<y>
coordinates identify the exact position within the image which is the pointer position (i.e., the hotspot).- <x>
The x-coordinate of the position in the cursor's coordinate system (left/top relative) which represents the precise position that is being pointed to.
- <y>
The y-coordinate of the position in the cursor's coordinate system (left/top relative) which represents the precise position that is being pointed to.
- <system>
System cursor.
alias Indicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it. all-scroll Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle. auto (by default) The UA determines the cursor to display based on the current context. cell Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle. context-menu A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it. copy Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it. col-resize Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them. crosshair A simple crosshair (e.g., short line segments resembling a "+" sign). Often used to indicate a two dimensional bitmap selection mode. default The platform-dependent default cursor. Often rendered as an arrow. help Help is available for the object under the cursor. Often rendered as a question mark or a balloon. move Indicates something is to be moved. no-drop Indicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it. none No cursor is rendered for the element. not-allowed Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it. pointer The cursor is a pointer that indicates a link. progress A progress indicator. The program is performing some processing, but is different from wait
in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.row-resize Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them. text Indicates text that may be selected. Often rendered as a vertical I-beam. User agents may automatically display a horizontal I-beam/cursor (e.g. same as the vertical-text
keyword) for vertical text, or for that matter, any angle of I-beam/cursor for text that is rendered at any particular angle.vertical-text Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam. wait Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass. n-resize Indicates that the north edge is to be moved. w-resize Indicates that the west edge is to be moved. s-resize Indicates that the south edge is to be moved. e-resize Indicates that the east edge is to be moved. nw-resize Indicates that the north-west corner is to be moved. ne-resize Indicates that the north-east corner is to be moved. sw-resize Indicates that the south-west corner is to be moved. se-resize Indicates that the south-east corner is to be moved. ew-resize Indicates a bidirectional resize cursor. ns-resize Indicates a bidirectional resize cursor. nesw-resize Indicates a bidirectional resize cursor. nwse-resize Indicates a bidirectional resize cursor.
Versions
Examples
h1 { cursor: pointer; }