Mouse pointer
cursor
Set which cursor marker to use for tracking mouse movements.
Property values
This property accepts either a URL or a keyword. The following keywords can be specified:
| auto | The browser decides what to display based on the current context |
| default | An arrow |
| none | No cursor is visible |
| context-menu | A context menu is available |
| help | Help information is available |
| pointer | A pointing hand that indicates a link |
| progress | Something is happening, but the user can still interact with the interface |
| wait | An hourglass or a watch, indicating that something is happening, and the user can't interact with the interface |
| cell | The table cell or set of cells can be selected |
| crosshair | Cross cursor, often used to indicate selection in a bitmap |
| text | An I-beam, for text that can be selected |
| vertical-text | Horizontal I-beam, for vertical text that can be selected |
| alias | An alias or shortcut is to be created |
| copy | Something is to be copied |
| move | Something is to be moved |
| no-drop | An item may not be dropped at the current location |
| not-allowed | The requested action will not be carried out |
| grab | Something can be grabbed or dragged |
| grabbing | Something is being grabbed or dragged |
| all-scroll | Something can be panned in any direction |
| col-resize | The column can be resized horizontally |
| row-resize | The row can be resized vertically |
| n-resize | Resize towards the top |
| e-resize | Resize towards the right |
| s-resize | Resize towards the bottom |
| w-resize | Resize towards the left |
| ne-resize | Resize towards the top right corner |
| nw-resize | Resize towards the top left corner |
| se-resize | Resize towards the bottom right corner |
| sw-resize | Resize towards the bottom left corner |
| ew-resize | Resize left and right |
| ns-resize | Resize up and down |
| nesw-resize | Resize top-left to bottom-right |
| nwse-resize | Resize top-right to bottom-left |
| zoom-in | Something can be zoomed in |
| zoom-out | Something can be zoomed out |
Custom cursor
For a custom cursor, provide a URL that points to a bitmap containing a 32px by 32px image encoded as PNG, GIF, JPG, BMP or CUR. Specify an X Y pair of values to precisely pinpoint its "hotspot", and specify one of the standard keywords to be used as a fallback, in case the url can't be loaded.
Examples
cursor: crosshair;
cursor: url('https://example.com/bullseye.png') 16 16, crosshair;