How do I change my cursor?
Author: Deron Eriksson
Description: This CSS tutorial describes how the cursor property can be used to modify the cursor on a web page.
Tutorial created using: Windows XP

With CSSW, the 'cursor' property can be used to change the mouse cursor. However, note that changing the mouse cursor to an unexpected icon can at times be quite annoying to visitors to your web site, so care should be exercised when changing the cursor.

The style-test.html file displays the cursor property with various values. If you open the style-test.html page, you can move the mouse pointer over the various divs to see the different cursors. Note that the url value works in IE7 but apparently doesn't work in Firefox.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
div { border: 1px solid black; }
<div style="cursor: auto">auto</div>
<div style="cursor: crosshair">crosshair</div>
<div style="cursor: default">default</div>
<div style="cursor: pointer">pointer</div>
<div style="cursor: move">move</div>
<div style="cursor: e-resize">e-resize</div>
<div style="cursor: ne-resize">ne-resize</div>
<div style="cursor: nw-resize">nw-resize</div>
<div style="cursor: n-resize">n-resize</div>
<div style="cursor: se-resize">se-resize</div>
<div style="cursor: sw-resize">sw-resize</div>
<div style="cursor: s-resize">s-resize</div>
<div style="cursor: w-resize">w-resize</div>
<div style="cursor: text">text</div>
<div style="cursor: wait">wait</div>
<div style="cursor: progress">progress</div>
<div style="cursor: help">help</div>
<div style="cursor: inherit">inherit</div>
<div style="cursor: url(favicon.ico)">url (works in IE, not Firefox)</div>

The following image shows many screen captures from IE7 merged together to show the various cursors from style-test.html.

display of different cursors in IE7