CSS cursor property used to define cursor type (i.e. mouse pointer) when the mouse moves over a certain area or, over a link on the webpage.
CSS Cursor Property
The browsers typically display the mouse pointer over any blank part of a web page, the gloved hand over any linked or clickable item and the edit cursor over any text or text field. With CSS you can redefine those properties to display a variety of different cursors.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS cursor property</title> <style type="text/css"> a { cursor: url("../images/custom.gif"), url("../images/custom.cur"), default; } .cursor-demo span{ min-width: 100px; padding: 5px 10px; margin-bottom: 5px; display: inline-block; border: 1px solid grey; border-radius: 3px; } </style> </head> <body> <h1>Custom Cursor</h1> <p>Place your mouse pointer <a href="#">over me</a> to reveal the custom cursor.</p> <hr> <h2>More Cursors</h2> <p>Place your mouse pointer over the box to reveal the cursor.</p> <div class="cursor-demo"> <span style="cursor: auto;">auto</span> <span style="cursor: default;">default</span> <span style="cursor: none;">none</span> <span style="cursor: context-menu;">context-menu</span> <span style="cursor: help;">help</span> <span style="cursor: pointer;">pointer</span> <span style="cursor: progress;">progress</span> <span style="cursor: wait;">wait</span> <span style="cursor: cell;">cell</span> <span style="cursor: crosshair;">crosshair</span> <span style="cursor: text;">text</span> <span style="cursor: vertical-text;">vertical-text</span> <span style="cursor: alias;">alias</span> <span style="cursor: copy;">copy</span> <span style="cursor: move;">move</span> <span style="cursor: no-drop;">no-drop</span> <span style="cursor: not-allowed;">not-allowed</span> <span style="cursor: grab;">grab</span> <span style="cursor: grabbing;">grabbing</span> <span style="cursor:e-resize">e-resize</span> <span style="cursor: n-resize;">n-resize</span> <span style="cursor: ne-resize;">ne-resize</span> <span style="cursor: nw-resize;">nw-resize</span> <span style="cursor: s-resize;">s-resize</span> <span style="cursor: se-resize;">se-resize</span> <span style="cursor: sw-resize;">sw-resize</span> <span style="cursor: w-resize;">w-resize</span> <span style="cursor: ew-resize;">ew-resize</span> <span style="cursor: ns-resize;">ns-resize</span> <span style="cursor: nesw-resize;">nesw-resize</span> <span style="cursor: nwse-resize;">nwse-resize</span> <span style="cursor: col-resize;">col-resize</span> <span style="cursor: row-resize;">row-resize</span> <span style="cursor: all-scroll;">all-scroll</span> <span style="cursor: zoom-in;">zoom-in</span> <span style="cursor: zoom-out;">zoom-out</span> </div> </body> </html> |
Creating a Customized Cursor
It is also possible to have completely customized cursors.
The cursor property handles a comma-separated list of user-defined cursors values followed by the generic cursor. If the first cursor is specified incorrectly or can’t be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.
If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead.
Tip:The standard format that can be used for cursors is the ‘
.cur
‘ format. However, you can convert images such as ‘.jpg
‘ and ‘.gif
‘ into ‘.cur
‘ format using the image converter software freely available online.
1 2 3 |
a { cursor: url("custom.gif"), url("custom.cur"), default; } |
In the above example ‘custom.gif
‘ and ‘custom.cur
‘ is the custom cursor file, uploaded to your server space, and ‘default
‘ is the generic cursor that will be used if the custom cursor is missing, or isn’t supported by the viewer’s browser.
Warning:If you are declaring a custom cursor, you must define a generic cursor at the end of the list, otherwise the custom cursor will not render correctly.