CSS/Properties/cursor

From Web Education Community Group
Jump to: navigation, search

cursor

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

Description

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


Values

  • <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

Example A

[style.css]

 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; }

[index.html]

<body>
  <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>
</body>


CSS Reference

The CSS specification defines the cursor property in 18.1 Cursors.