CSS allows you to define a cursor that will be displayed at the specific element on your page. For instance, if you want to show that the clicking on the element will show the context help, you can define the "help" cursor for this element using the cursor CSS property.
Cursor Property Syntax
cursor: [<url [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]
Below is the list of cursor styles you can use. You can preview each cursor and test if your browser supports it by moving mouse pointer above the example blocks.
CSS2 Cursor Styles
Styles, available in the CSS 2.2 Specification:
- The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle
the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.
Initial value. The browser determines the cursor to display based on the current context. (I.e. above the text it will be "text" cursor, above the hyperlink it will be the "pointer", and so on.)
- A simple crosshair (e.g., short line segments resembling a "+" sign).
- The platform-dependent default cursor. Often rendered as an arrow.
- The cursor is a pointer that indicates a link.
- Indicates something is to be moved.
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
- Indicate that some edge is to be moved. For example, the
'se-resize' cursor is used when the movement starts from the
south-east corner of the box.
cursor:nw-resize cursor:n-resize cursor:ne-resize cursor:w-resize cursor:e-resize cursor:sw-resize cursor:s-resize cursor:se-resize
- Indicates text that may be selected. Often rendered as an I-bar.
- Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
CSS3 Cursor Styles
In 2004, more cursor styles were added to the CSS3 UI candidate recommendation, which became standard since 2018.
No cursor is rendered for the element.
- A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.
- A progress indicator. The program is performing some processing, but is different from "wait" in that the user may still interact with the program.
- Indicates that a cell or set of cells may be selected.
- Indicates vertical-text that may be selected.
- Indicates an alias of/shortcut to something is to be created.
- Indicates something is to be copied.
- Indicates that the dragged item cannot be dropped at the current cursor location.
- Indicates that the requested action will not be carried out.
- Indicates that something can be grabbed (dragged to be moved).
- Indicates that something is being grabbed (dragged to be moved).
- Indicates that the item/column can be resized horizontally.
- Indicates that the item/row can be resized vertically.
- Indicates that the something can be scrolled in any direction.
- Indicates that something can be zoomed (magnified) in.
- Indicates that something can be zoomed (magnified) out.
CSS2 cursor styles are supported by all modern browsers.
CSS3 styles, except zoom-in and zoom-out, are supported by 100% of desktop and 65% of mobile browsers.
CSS3 zoom-in and zoom-out cursor styles are supported by 95% of desktop and 65% of mobile browsers.
Cursor formats, supported by browsers, if cursor is specified via url:
- Internet Explorer, Edge: cur, ani.
- Firefox, Gecko: cur, png, gif, jpg, svg.
- Chrome, Safari: cur, png, gif, jpg.