Advanced Search

CSS Cursor examples

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <h1>CSS cursor styles</h1>
  2.  
  3. <h2>Common cursors</h2>
  4. <span style="cursor: auto">cursor: <b> auto</b>.</span><br/>
  5. <span style="cursor: crosshair">cursor: <b>crosshair</b>.</span><br/>
  6. <span style="cursor: default">cursor: <b>default</b>.</span><br/>
  7. <span style="cursor: pointer">cursor: <b>pointer</b> 
  8. (or: &quot;hand&quot; - just IE).</span><br/>
  9.  
  10. <span style="cursor: move">cursor: <b>move</b>.</span><br/>
  11. <span style="cursor: text">cursor: <b>text</b>.</span><br/>
  12. <span style="cursor: wait">cursor: <b>wait</b>.</span><br/>
  13. <span style="cursor: progress">cursor: <b>progress</b>.</span><br/>
  14. <span style="cursor: help">cursor: <b>help</b>.</span><br/>
  15. <br/>
  16.  
  17. <h2>Resize cursors</h2>
  18. <span style="cursor: e-resize">cursor: <b>e-resize</b>.</span><br/>
  19. <span style="cursor: ne-resize">cursor: <b>ne-resize</b>.</span><br/>
  20. <span style="cursor: nw-resize">cursor: <b>nw-resize</b>.</span><br/>
  21. <span style="cursor: n-resize">cursor: <b>n-resize</b>.</span><br/>
  22. <span style="cursor: se-resize">cursor: <b>se-resize</b>.</span><br/>
  23. <span style="cursor: sw-resize">cursor: <b>sw-resize</b>.</span><br/>
  24. <span style="cursor: s-resize">cursor: <b>s-resize</b>.</span><br/>
  25. <span style="cursor: w-resize">cursor: <b>w-resize</b>.</span><br/>
  26. <br/>
  27.  
  28. <h2>Other cursors</h2>
  29. <span style="cursor: row-resize">cursor: <b>row-resize</b>.</span><br/>
  30. <span style="cursor: col-resize">cursor: <b>col-resize</b>.</span><br/>
  31. <span style="cursor: vertical-text">cursor: <b>vertical-text</b>.</span><br/>
  32. <span style="cursor: all-scroll">cursor: <b>all-scroll</b>.</span><br/>
  33. <span style="cursor: no-drop">cursor: <b>no-drop</b>.</span><br/>
  34. <span style="cursor: not-allowed">cursor: <b>not-allowed</b>.</span><br/>
  35. <span style="cursor: url('/img/black_arrow.cur'), default;">cursor: 
  36. <b>url('/img/black_arrow.cur'), default</b> - IE 6+ only -- append &quot;, 
  37. default&quot; so it works in FF, too</span><br/>
  38. <br/>
  39.  
  40. <h2>All cursor codes - ready to copy and paste</h2>
  41. <textarea name="copy_and_paste" rows="2" cols="90">auto, crosshair, default, 
  42. pointer, move, text, wait, progress, help, resize, e-resize, ne-resize, 
  43. nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, row-resize, 
  44. col-resize, vertical-text, all-scroll, no-drop, not-allowed, url()</textarea>
  45. <br/>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.