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

The cursor property contains following information:

  1. value: [[<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]] or inherit;
  2. initial: auto;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual, interactive;
  7. computed value: as specified.

The value auto sets the cursor to the browser default symbol. Other values are used as their meaning suggests, i.e. pointer indicates a link, resize group indicates that an element may be resized in given direction, wait indicates that the program is busy; etc... The uri value may be set to one or more URI resources, with the browser choosing the first one possible to render.

Example

CSS cursors example:

​x
 
<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div.point {
    cursor:pointer;
}
div.uri {
    cursor:url("../../../img/tutorials/cursor_ex1.png"), crosshair;
}
div {
    position:relative; margin-top:30px; width:90%; height:100px;
    border:1px solid gray;
}
</style>
</head>
​
<body>
​
<div class="point">This box has cursor modified from 'default' to 'pointer'.</div>
<div class="uri">This box has cursor modified from 'default' to 'uri' or, if not possible to load, 'crosshair'.</div>
​
</body>
</html>

 

›› go to examples ››