CSS Cursor examples

Shows how to use CSS to change the mouse cursor.
Other tutorials: echoecho.com is also a good help.

<!------>
 
<h1>CSS cursor styles</h1>
 
<h2>Common cursors</h2>
<span style="cursor: auto">cursor: <b> auto</b>.</span><br/>
<span style="cursor: crosshair">cursor: <b>crosshair</b>.</span><br/>
<span style="cursor: default">cursor: <b>default</b>.</span><br/>
<span style="cursor: pointer">cursor: <b>pointer</b> 
(or: &quot;hand&quot; - just IE).</span><br/>
 
<span style="cursor: move">cursor: <b>move</b>.</span><br/>
<span style="cursor: text">cursor: <b>text</b>.</span><br/>
<span style="cursor: wait">cursor: <b>wait</b>.</span><br/>
<span style="cursor: progress">cursor: <b>progress</b>.</span><br/>
<span style="cursor: help">cursor: <b>help</b>.</span><br/>
<br/>
 
<h2>Resize cursors</h2>
<span style="cursor: e-resize">cursor: <b>e-resize</b>.</span><br/>
<span style="cursor: ne-resize">cursor: <b>ne-resize</b>.</span><br/>
<span style="cursor: nw-resize">cursor: <b>nw-resize</b>.</span><br/>
<span style="cursor: n-resize">cursor: <b>n-resize</b>.</span><br/>
<span style="cursor: se-resize">cursor: <b>se-resize</b>.</span><br/>
<span style="cursor: sw-resize">cursor: <b>sw-resize</b>.</span><br/>
<span style="cursor: s-resize">cursor: <b>s-resize</b>.</span><br/>
<span style="cursor: w-resize">cursor: <b>w-resize</b>.</span><br/>
<br/>
 
<h2>Other cursors</h2>
<span style="cursor: row-resize">cursor: <b>row-resize</b>.</span><br/>
<span style="cursor: col-resize">cursor: <b>col-resize</b>.</span><br/>
<span style="cursor: vertical-text">cursor: <b>vertical-text</b>.</span><br/>
<span style="cursor: all-scroll">cursor: <b>all-scroll</b>.</span><br/>
<span style="cursor: no-drop">cursor: <b>no-drop</b>.</span><br/>
<span style="cursor: not-allowed">cursor: <b>not-allowed</b>.</span><br/>
<span style="cursor: url('/img/black_arrow.cur'), default;">cursor: 
<b>url('/img/black_arrow.cur'), default</b> - IE 6+ only -- append &quot;, 
default&quot; so it works in FF, too</span><br/>
<br/>
 
<h2>All cursor codes - ready to copy and paste</h2>
<textarea name="copy_and_paste" rows="2" cols="90">auto, crosshair, default, 
pointer, move, text, wait, progress, help, resize, e-resize, ne-resize, 
nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, row-resize, 
col-resize, vertical-text, all-scroll, no-drop, not-allowed, url()</textarea>
<br/>
Snippet Details




Sorry folks, comments have been deactivated for now due to the large amount of spam.

Please try to post your questions or problems on a related programming board, a suitable mailing list, a programming chat-room,
or use a QA website like stackoverflow because I'm usually too busy to answer any mails related
to my code snippets. Therefore please just mail me if you found a serious bug... Thank you!


Older comments:

None.