Cursor styles
Back to the index.
This page has been translated into Italian.
By changing the value of the cursor declaration you can assign cursor styles
to various HTML elements. Although in theory this is great functionality, it's very easy to confuse your
users by defining inappropriate cursor styles. Please be very careful; in general the browser defaults work
fine, and besides they're what the user expects.
The leftmost cells of the compatibility table have the indicated cursor value. See also the
W3C and
Microsoft references.
|
alias
|
No |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
all-scroll
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
cell
|
No |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
col-resize
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
context-menu
|
No |
Yes |
No |
Yes |
Yes |
No |
Yes |
No |
Yes |
No |
|
|
copy
|
No |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
crosshair
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
default
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
hand
|
Yes |
No |
No |
No |
No |
No |
No |
See the note below. |
|
help
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
move
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
no-drop
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
none
|
No |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
not-allowed
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
pointer
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
See the note below. |
|
progress
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
row-resize
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
text
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
url
|
No |
Almost |
Yes |
Yes |
Yes |
Yes |
|
Use a gif image as cursor: 
Syntax: cursor: url(../pix/cursor_ppk.gif),auto. The auto is required as fallback; the url will not work without it. (Don’t ask me why.)
See the note below.
- Firefox has a bug in this test: although I defined the cursor for the entire TD, Firefox only shows it when I hover over the DIV inside the TD.
|
|
url
|
Yes |
Almost |
Yes |
Yes |
Yes |
Yes |
|
Use a cur image as cursor: 
Syntax: cursor: url(../pix/cursor_ppk.cur),auto. The auto is required as fallback; the url will not work without it. (Don’t ask me why.)
I have heard, but did not test, that the cursor’s URL must be relative to the page,
and not to the style sheet, in IE at least up to 9.
See the note below.
- Firefox has a bug in this test: although I defined the cursor for the entire TD, Firefox only shows it when I hover over the DIV inside the TD.
|
|
vertical-text
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
wait
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
*-resize
|
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
The example is 'N-resize'. Instead of the 'N' you can also
use 'NW', 'W', 'SW', 'S', 'SE', 'E', 'NE' |
|
zoom-in
|
No |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
|
zoom-out
|
No |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
Tested browsers
- IE 8, 9, and 10
- On separate Windows 7 virtualizations as downloaded from Modern IE.
- IE11
- On Windows 8.1 virtualization as downloaded from Modern IE.
- Edge 13
- On Surface Book with Windows 10.
- Firefox 47
- 47.0.1 on Win10 and Mac
- Safari 9.1.1
- 9.1.1 on Mac
- Chrome 51
- 51 on Win10 and Mac
- Opera 38
- 38 on Win10 and Mac
- UC 5.6
- 5.6 on Windows 7
Operating systems
- Mac
- Mac Mini with OS 10.11.15
- This is my main test station. It also runs all virtual Windows systems.
- Windows 7 and 8.1
- All downloaded from modern.ie. I use Parallels, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
- Windows 10
- Microsoft Surface Book with Windows 10
Note on pointer and hand
In the past the hand value was Microsoft's way of saying pointer; and
IE 5.0 and 5.5 only support hand. Because it's the cursor value that's used most often,
most other browsers have also implemented hand.
Since IE 6 and 7 support pointer, there's no more reason to use hand,
except when older IEs are part of your target audience. In that case, the only cross-browser syntax
is:
element {
cursor: pointer;
cursor: hand;
}
Note that the two declarations must be in this order.
Note on URLs
IE/Edge needs CUR, while all other browsers need GIF. Fortunately you can combine them.
element {
cursor: url(../pix/cursor_ppk.gif),auto;
cursor: url(../pix/cursor_ppk.cur),auto;
}
Note that the two declarations must be in this order.