From W3C Wiki
Jump to: navigation, search


The cursor property specifies the type of cursor to be displayed for the pointing device.


Values [ [<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 ] ] | inherit
Initial value auto
Applies to all elements
Inherited Yes


  • <uri>

  • auto
    The UA determines the cursor to display based on the current context.

  • crosshair
    A simple crosshair.

  • default
    The platform-dependent default cursor. Often rendered as an arrow.

  • pointer
    The cursor is a pointer that indicates a link.

  • move
    Indicates something is to be moved.

  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
    Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

  • text
    Indicates text that may be selected. Often rendered as an I-beam.

  • wait
    Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

  • help
    Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

  • progress
    A progress indicator. The program is performing some processing, but is different from 'wait' in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


 p#au{ cursor: auto; }
 p#cro{ cursor: crosshair; }
 p#def{ cursor: default; }
 p#poi{ cursor: pointer; }
 p#mo{ cursor: move; }
 p#ne{ cursor: ne-resize; }
 p#sw{ cursor: sw-resize; }
 p#tex{ cursor: text; }
 p#wai{ cursor: wait; }
 p#he{ cursor: help; }
 p#pro{ cursor: progress; }


  <p id="au">auto</p>
  <p id="cro">crosshair</p>
  <p id="def">default</p>
  <p id="poi">pointer</p>
  <p id="mo">move</p>
  <p id="ne">ne-resize</p>
  <p id="sw">sw-resize</p>
  <p id="tex">text</p>
  <p id="wai">wait</p>
  <p id="he">help</p>
  <p id="pro">progress</p>

CSS Reference

The CSS specification defines the cursor property in 18.1 Cursors.