CSS cursor Property

The cursor property specifies the type of cursor to be displayed for the pointing device when over the element's border, padding, and content.

Formal syntax: [ [<uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ] | inherit

cursor: [value];

Move mouse over values to see cursors in action

• autoThe browser determines the cursor to display based on the current context.
• defaultThe platform-dependent default cursor. Often rendered as an arrow.
• noneNo cursor is rendered for the element.

• context-menuA context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.
• helpHelp is available for the object under the cursor. Often rendered as a question mark or a balloon.
• pointerThe cursor is a pointer that indicates a link.
• progressThe program is busy in the background but the user can still interact with the interface.
• waitIndicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

• cellIndicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.
• crosshairA simple crosshair (e.g., short line segments resembling a "+" sign). Often used to indicate a two dimensional bitmap selection mode.
• textIndicating text can be selected, typically an I-beam.
• vertical-textIndicating that vertical text can be selected, typically a sideways I-beam.

• aliasIndicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.
• copyIndicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.
• moveIndicates something is to be moved.
• no-dropIndicates 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.
• not-allowedIndicates that the requested action will not be carried out. Often rendered as a circle with a line through it.

• n-resizeSome 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.
• ne-resizeAs above
• e-resizeAs above
• se-resizeAs above
• s-resizeAs above
• sw-resizeAs above
• w-resizeAs above
• nw-resizeAs above
• ew-resizeIndicates a bidirectional resize cursor.
• ns-resizeAs above
• nesw-resizeAs above
• nwse-resizeAs above
• col-resizeIndicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
• row-resizeIndicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
• all-scrollIndicates 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.

• zoom-inIndicates that something can be zoomed (magnified) in.
• zoom-outIndicates that something can be zoomed (magnified) out.

• <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.

.help { cursor: help; }
.custom { cursor:url(mycursor.cur), pointer; }

Click the button below to experiment with this property.

Give it a Try!

1+

4+

1+

1.2+

7+

• Share on Facebook
• Share on Twitter
• Share on Google+