changing mouse cursor shapes

cursor: ***;

Internet Explorer Firefox Opera7

The cursor property changes mouse cursor shapes.

#example { cursor: wait; }

The values for the cursor property

(Move the mouse over the "Example" text)

Property Value Shape Example
cursor Internet Explorer Firefox Opera7
auto cursor01 Example
default cursor02 Example
pointer cursor03 Example
crosshair cursor04 Example
move cursor05 Example
text cursor06 Example
wait cursor07 Example
help cursor08 Example
n-resize cursor09 Example
e-resize cursor10 Example
s-resize cursor09 Example
w-resize cursor10 Example
ne-resize cursor11 Example
se-resize cursor12 Example
sw-resize cursor11 Example
nw-resize cursor12 Example
Custom cursor Internet Explorer6
url(***.cur) cursor20 Example
Extension Internet Explorer6
col-resize cursor13 Example
row-resize cursor14 Example
all-scroll cursor15 Example
not-allowed cursor16 Example
no-drop cursor17 Example
progress cursor18 Example
vertical-text cursor19 Example

The default is "auto".

About custom cursor (MSIE 6+)

The custom cursor file can be specified by using the "url()" option.

[Move the mouse over this text]

Example of specifying "example.cur".
cursor: url(example.cur);

A comma-separated list of cursor values

In the following example, when the custom cursor cannot be used in the user's computer, "text" is applied.
cursor: url(example.cur), text;

In the following example, when "example.cur" cannot be used in the user's computer, "example.gif" is used.
cursor: url(example.cur), url(example.gif), text;

Tips and Notes

The change of the cursor is not so liked.


<title>TAG index</title>

<style type="text/css">

#example1 { cursor: wait; }
#example2 { cursor: help; }
#example3 { cursor: url(image/example.cur), default; }



<p><span id="example1">Please wait for a while</span></p>

<p><a href="index.html" id="example2">Help</a></p>

<p><img src="image/face.gif" alt="Face" width="75" height="78" id="example3"></p>


Please wait for a while