CSS Reference

"cursor" - css property (v. css 2)

  • To specify the type of cursor to be displayed over an element.
  • Initial value: auto
  • The property is inherited
  • HTML usage: all elements
  • Browsers that support the cursor - property :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari
    Browser deviation:
    • Firefox, Chrome and Safari handles an url type cursor only if it is the first choice av other named types (cursor: url(hyper.cur), pointer;).
    • Opera handles not an url type cursor.

Possible cursor values:

value Comments
auto The user agent (UA) determines the cursor to display based on the current context. (the default)
crosshair A simple crosshair (e.g., short line segments resembling a "+" sign).
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 Indicate that some edge is to be moved. Used when the movement starts from the east edge of the box.
ne-resize Indicate that some edge is to be moved. Used when the movement starts from the north-east corner of the box.
nw-resize Indicate that some edge is to be moved. Used when the movement starts from the north-west corner of the box.
n-resize Indicate that some edge is to be moved. Used when the movement starts from the north edge of the box.
se-resize Indicate that some edge is to be moved. Used when the movement starts from the south-east corner of the box.
sw-resize Indicate that some edge is to be moved. Used when the movement starts from the south-west corner of the box.
s-resize Indicate that some edge is to be moved. Used when the movement starts from the south edge of the box.
w-resize Indicate that some edge is to be moved. Used when the movement starts from the west edge 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.
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.
help Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
{uri} The user agent (UA) retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc.
inherit Will inherit the value from parent specification.

Property "cursor" example:

<!DOCTYPE HTML >
<html  >
  <head>
    <title>Test</title>
    <script type="text/javascript" >
    </script>
    <style   type="text/css">
      div  { width: 70px; height: 40px;
             margin: 4px 4px 4px 4px;
             float: left; background-color: #d6d6d6;}
      .c1{ cursor: crosshair;}
      .c2{ cursor: pointer;}
      .c3{ cursor: s-resize;}
      .c4{ cursor: wait;}
      .c5{ cursor: help;}
      .c6{ cursor: url(images/pen_i.cur), pointer;}
      .c7{ cursor: inherit;}
      .c8{ cursor: url(images/pen_i.cur);}
    </style>
  </head>
  <body >
    <div style="width: 240px; height: 150px;
         cursor: move;
         background-color: #6495ED;">
      <div class="c1">cursor: crosshair</div>
      <div class="c2">cursor: pointer</div>
      <div class="c3">cursor: s-resize</div>
      <div class="c4">cursor: wait</div>
      <div class="c5">cursor: help</div>
      <div class="c6">cursor: url()</div>
      <div class="c7">cursor: inherit</div>
      <div class="c8">cursor: url() alone</div>
      cursor: move;
    </div>
  </body>
</html>

Javascript access:

// To SET values ([o] is the target object)
[o].style.cursor="cursor value"
// To GET values you must first get the computed style object
// To get that object in IE or Opera:
var cStyle=[o].currentStyle;
// To get that object in Firefox, Chrome or Safari (w3c-type):
var cStyle=window.getComputedStyle([o],null)
// To GET the property value:;
var value=cStyle.cursor;
// IE will allways return "auto"
// Opera will allways return "default" 
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.