CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

CSS cursor Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The cursor CSS property specifies the type of cursor to be displayed when the pointer is placed over an element.

The following table summarizes the usages context and the version history of this property.

Default value: auto
Applies to: All elements
Inherited: Yes
Animatable: No. See animatable properties.
Version: CSS 2, 3

Syntax

The syntax of the property is given with:

cursor [url(address of cursor file),]0 or more times | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | 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 | initial | inherit

The example below shows the cursor property in action.

h1 {
    cursor: copy;
}
p {
    cursor: help;
}
a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

The cursor property handles a comma-separated list of user-defined cursors values followed by the "generic cursor". If the first cursor is specified incorrectly or can't be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.

If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead. Learn more.


Property Values

The following table describes the values of this property.

Value Look Description
General
auto   The browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text. This is default.
default Default Cursor The default cursor for the platform, without regard for the context, typically an arrow.
none   No cursor is rendered.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element cursor property.
Links & status Cursors
context-menu Context-menu Cursor Indicates that a context-menu is available.
help Help Cursor Indicates that help is available.
pointer Pointer Cursor A cursor that indicates a link, typically a hand with an extended index finger.
progress Progress Cursor A progress indicator. The program is performing some processing but the user can still interact with the interface (unlike for wait).
wait Wait Cursor Indicates that the program is busy and the user should wait.
Selection Cursors
cell Cell Cursor Indicates that a cell (or set of cells) can be selected.
crosshair Crosshair Cursor A simple crosshair. Often used to indicate selection in a bitmap.
text Text Cursor Indicates text that can be selected, typically an I-beam.
vertical-text Vertical-text Cursor Indicates that vertical text can be selected, a sideways I-beam.
Drag and Drop Cursors
alias Alias Cursor Indicates that an alias or shortcut is to be created.
copy Copy Cursor Indicates that something can be copied.
move Move Cursor Indicates that the hovered object can be moved.
no-drop No-drop Cursor Indicates that the dragged item cannot be dropped at the current location.
not-allowed Not-allowed Cursor Indicates that something cannot be done.
Resizing & scrolling Cursors
all-scroll All-scroll Cursor Indicates that something can be scrolled in any direction (panned).
col-resize Col-resize Cursor Indicates that the column can be resized horizontally.
row-resize Row-resize Cursor Indicates that the row can be resized vertically.
n-resize N-resize Cursor Indicates that some edge is to be moved up (north).
e-resize E-resize Cursor Indicates that some edge is to be moved right (east).
s-resize S-resize Cursor Indicates that some edge is to be moved down (south).
w-resize W-resize Cursor Indicates that some edge is to be moved left (west).
ne-resize NE-resize Cursor Indicates that some edge is to be moved up and right (north/east).
nw-resize NW-resize Cursor Indicates that some edge is to be moved up and left (north/west).
se-resize SE-resize Cursor Indicates that some edge is to be moved down and right (south/east).
sw-resize SW-resize Cursor Indicates that some edge is to be moved down and left (south/west).
ew-resize EW-resize Cursor Indicates a bidirectional resize cursor.
ns-resize NS-resize Cursor
nesw-resize NESW-resize Cursor
nwse-resize NWSE-resize Cursor
Zoom and Grab Cursors
zoom-in Zoom-in Cursor Indicates that something can be zoomed in.
zoom-out Zoom-out Cursor Indicates that something can be zoomed out.
grab Grab Cursor Indicates that something can be grabbed (dragged to be moved).
grabbing Grabbing Cursor Indicates that something is grabbed.

Browser Compatibility

The cursor property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1.2+
  • Opera 7+

Further Reading

See tutorial on: CSS Cursors.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties