Webmaster tips » CSS

Updated: Nov 26, 2019

How to Specify Mouse Cursors with CSS

Average rating
  • 5 out of 5 Stars
Rate this article

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.

CSS Code

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:

url
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.

cursor: url('https://www.wmtips.com/img/handpnt.cur'),text

auto
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.)

cursor: auto

crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).

cursor: crosshair

default
The platform-dependent default cursor. Often rendered as an arrow.

cursor: default

pointer
The cursor is a pointer that indicates a link.

cursor: pointer

move
Indicates something is to be moved.

cursor: move

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
text
Indicates text that may be selected. Often rendered as an I-bar.

cursor: text

help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

cursor: help

CSS3 Cursor Styles

In 2004, more cursor styles were added to the CSS3 UI candidate recommendation, which became standard since 2018.

none
No cursor is rendered for the element.

cursor: none

context-menu
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.

cursor: context-menu

progress
A progress indicator. The program is performing some processing, but is different from "wait" in that the user may still interact with the program.

cursor: progress

cell
Indicates that a cell or set of cells may be selected.

cursor: cell

SEMrush
vertical-text
Indicates vertical-text that may be selected.

cursor: vertical-text

alias
Indicates an alias of/shortcut to something is to be created.

cursor: alias

copy
Indicates something is to be copied.

cursor: copy

no-drop
Indicates that the dragged item cannot be dropped at the current cursor location.

cursor: no-drop

not-allowed
Indicates that the requested action will not be carried out.

cursor: not-allowed

grab
Indicates that something can be grabbed (dragged to be moved).

cursor: grab

grabbing
Indicates that something is being grabbed (dragged to be moved).

cursor: grabbing

col-resize
Indicates that the item/column can be resized horizontally.

cursor: col-resize

row-resize
Indicates that the item/row can be resized vertically.

cursor: row-resize

all-scroll
Indicates that the something can be scrolled in any direction.

cursor: all-scroll

zoom-in
Indicates that something can be zoomed (magnified) in.

cursor: zoom-in

zoom-out
Indicates that something can be zoomed (magnified) out.

cursor: zoom-out

Browser Compatibility

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.
Get a 15 Day Free Trial at 3DCart.com

Rate This Article

How would you rate the quality of this content?
Currently rated: 5 out of 5 stars. 2 people have rated this article.
  • 5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Get a 15 Day Free Trial at 3DCart.com