Beginning CSS: Cascading Style Sheets for Web Design, Third Edition

16

Customizing the Mouse Cursor

WHAT YOU WILL LEARN IN THIS CHAPTER:

• How to customize the cursor
• The different cursors that can be used

CSS provides the cursor property to control the type of cursor displayed for a particular element. When you build advanced web applications, it can be useful to change the cursor to indicate to users when they can perform certain actions, such as re-sizing or dragging elements. This should always be done with care because to use an inappropriate cursor would be confusing to your users. Done correctly it can potentially make custom interactions more usable.

THE CURSOR PROPERTY

The following table outlines the cursor property and its possible values.

PROPERTY	VALUE
cursor	[<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]
Initial value: auto
Non-standard extensions to cursor	hand | all-scroll | col-resize | row-resize | no-drop | not-allowed | vertical-text

NOTE Safari and Chrome do not support non-standard cursor keywords. Opera for the Mac does not support *-resize keywords, or non-standard cursor keywords. Opera for Windows supports *-resize keywords, but not non-standard keywords. Firefox for the Mac does not support the all-scroll keyword, but Firefox for Windows does. IE supports all possible ...