O'Reilly logo

Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Richard York, Ian Pouncey

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

images 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required