Cursor

You might say

Change the cursor to a pointer when it moves over something clickable.

The mouse pointer changes shape to preview whether an area can be clicked, typed in, dragged, or is currently unavailableWhen a mouse moves over an element, CSS cursor can show a familiar system pointer: pointer for clickable areas, text for editable text, grab for draggable objects, and not-allowed as an extra unavailable-state cue. These shapes vary by platform and cannot replace clear controls, labels, focus styles, or disabled behavior. Touchscreens usually show no mouse pointer. The blinking insertion line inside a text field is the caret, not the mouse pointer.

Move your mouse to feel each pointer change These changes only appear on mouse or trackpad devices The exact system shapes may differ slightly

CSS cursor

Plain content

This is ordinary reading text.

default

Clickablepointer

Editabletext

Draggablegrab / grabbing

Unavailablenot-allowed

Mouse pointer Cursor and text caret

Mouse pointerFollows the mouse and previews the available interaction.

Insert hereText caretAppears after focusing a text field and marks the insertion point.

A practical request for an AI Agent

Check whether the mouse pointers on this page match the actual interactions. Review buttons and links, text fields, draggable cards, and disabled actions separately; do not add custom image cursors. Then hover each area with a mouse and tell me what you changed.

Typical use cases

The pointer changes with the drag state

Hover Hold

An unavailable action still needs an explanation

Publish projectConnect a domain before publishing