cursor (CSS property)

Description

This property sets the type of cursor to be displayed for a pointing device.

#current {
  cursor: text;
}

Value

We can specify a comma-separated list of URI values from which we want CSS to retrieve the cursor. And in a similar way to the method by which a list of font family names is used, the browser will use the first URI it successfully retrieves. Note that you must also specify a fallback cursor-type keyword as shown below:

body{
cursor: url(cursor.cur),default;
}

Descriptions for all the valid cursor keywords are provided here:

auto

the browser’s default cursor in the current context

crosshair

a crosshair cursor

default

the default cursor for the platform, without regard for the context

e-resize

a cursor that indicates that a right-hand (“east”) edge will be moved

help

a cursor that indicates that help is available for the object under the cursor

move

a cursor that indicates that something will be moved

n-resize

a cursor that indicates that a top (“north”) edge will be moved

ne-resize

a cursor that indicates that top (“north”) and right-hand (“east”) edges will be moved

nw-resize

a cursor that indicates that top (“north”) and left-hand (“west”) edges will be moved

pointer

a cursor that indicates a link (commonly a hand with an extended index finger)

progress

a cursor that indicates progress: the application is busy doing something, but the user can still interact with it

s-resize

a cursor that indicates that a bottom (“south”) edge will be moved

se-resize

a cursor that indicates that bottom (“south”) and right-hand (“east”) edges will be moved

sw-resize

a cursor that indicates that bottom (“south”) and left-hand (“west”) edges will be moved

text

a cursor that indicates that text may be selected (commonly an I-beam)

w-resize

a cursor that indicates that a left-hand (“west”) edge will be moved

wait

a cursor that indicates that the application is busy and that the user should wait (commonly an hourglass)

(A brief diagram of the above can be found here)

Compatibility

Internet Explorer				Firefox					Safari				Opera			Chrome
5.5	6.0	7.0	8.0	1.0	1.5	2.0	3.0	3.5	1.3	2.0	3.1	4.0	9.2	9.5	10.0	2.0
Buggy	Buggy	Buggy	Buggy	Partial	Full	Full	Full	Full	Partial	Partial	Full	Full	Partial	Partial	Partial	Full

Internet Explorer for Windows versions up to and including 5.5 don’t support the pointer value; instead, they use the non-standard value hand.

In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.

Internet Explorer up to and including version 8 only support URI values of type .CUR and .ANI. (The other listed browsers list have support for .CUR, .PNG, .GIF and .JPG but not .ANI .) Note also that the Windows operating system requires the image to be 32 x 32 pixels or smaller although the specifications do allow for larger sizes than this.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Opera versions up to and including 10.10 don’t support URI values.

Safari versions less than 3, and Firefox versions less than 1.5 don’t support URI values.