HTML Cursor Code

The cursor is the thing that moves when you move the mouse. To change the look of the cursor within your HTML codes, you need to use CSS (Cascading Style Sheets).

Example Cursor Code

Here are examples that demonstrate the various CSS cursors (based on the CSS specification). See how the cursor changes as you hover over each line.

(Hover over each heading to see the cursor effect).

HTML cursor codes - "Auto"

HTML cursor codes - "Default"

HTML cursor codes - "Text"

HTML cursor codes - "Help"

HTML cursor codes - "Pointer"

HTML cursor codes - "Wait"

HTML cursor codes - "Crosshair"

HTML cursor codes - "Move"

HTML cursor codes - "Smile"

HTML cursor codes - "Progress"

HTML cursor codes - "e-resize"

HTML cursor codes - "ne-resize"

HTML cursor codes - "nw-resize"

HTML cursor codes - "n-resize"

HTML cursor codes - "se-resize"

HTML cursor codes - "sw-resize"

HTML cursor codes - "s-resize"

HTML cursor codes - "w-resize"

Here is the code used to create the above examples:


<html>
<head>
<style type="text/css">
.auto { cursor: auto }
.default { cursor: default }
.text { cursor: text }
.help { cursor: help }
.pointer { cursor: pointer }
.wait { cursor: wait }
.crosshair { cursor: crosshair }
.move { cursor: move }
.smile { cursor:url(http://www.quackit.com/pix/smile.gif),auto }
.progress { cursor: progress }
.e-resize { cursor: e-resize }
.ne-resize { cursor: ne-resize }
.nw-resize { cursor: nw-resize }
.n-resize { cursor: n-resize }
.se-resize { cursor: se-resize }
.sw-resize { cursor: sw-resize }
.s-resize { cursor: s-resize }
.w-resize { cursor: w-resize }
</style>
</head>
<body>
<p>(Hover over each heading to see the cursor effect).</p>
<h3 class="auto">HTML cursor codes - "Auto"</h3>
<h3 class="default">HTML cursor codes - "Default"</h3>
<h3 class="text">HTML cursor codes - "Text"</h3>
<h3 class="help">HTML cursor codes - "Help"</h3>
<h3 class="pointer">HTML cursor codes - "Pointer"</h3>
<h3 class="wait">HTML cursor codes - "Wait"</h3>
<h3 class="crosshair">HTML cursor codes - "Crosshair"</h3>
<h3 class="move">HTML cursor codes - "Move"</h3>
<h3 class="smile">HTML cursor codes - "Smile"</h3>
<h3 class="progress">HTML cursor codes - "Progress"</h3>
<h3 class="e-resize">HTML cursor codes - "e-resize"</h3>
<h3 class="ne-resize">HTML cursor codes - "ne-resize"</h3>
<h3 class="nw-resize">HTML cursor codes - "nw-resize"</h3>
<h3 class="n-resize">HTML cursor codes - "n-resize"</h3>
<h3 class="se-resize">HTML cursor codes - "se-resize"</h3>
<h3 class="sw-resize">HTML cursor codes - "sw-resize"</h3>
<h3 class="s-resize">HTML cursor codes - "s-resize"</h3>
<h3 class="w-resize">HTML cursor codes - "w-resize"</h3>
</body>

For more detail, check out the CSS cursor specifications.

HTML