🎯 CSS cursor Property

The cursor property specifies the type of mouse pointer to be displayed when a user hovers over a specific HTML element.

By changing the visual state of the pointer, this property provides critical context and instant feedback to users, indicating whether an element is clickable, text-selectable, draggable, or currently loading.

CSS provides a rich set of built-in cursors to handle almost any user interface interaction. Here are the most essential values grouped by functionality:

• auto: The browser automatically assigns an appropriate cursor based on the context (e.g., text cursor over text, arrow over blank areas).
• default: The platform's standard default arrow pointer.
• pointer: A hand icon indicating a clickable link, button, or interactive element.
• text: An I-beam shape indicating that the text underneath is selectable or editable.
• vertical-text: An I-beam shape rotated sideways for vertical text layouts.

• wait: An hourglass or loading spinner indicating the application is busy and the user must wait.
• progress: A combination of the standard arrow and a loading spinner, showing that background processing is active but interaction is still possible.
• none: Completely hides the mouse pointer when hovering over the designated element.

• move: A four-way directional arrow signaling that the element can be dragged and relocated.
• grab: An open hand layout indicating that an item is ready to be gripped and dragged.
• grabbing: A closed fist icon showing that an item is actively being dragged.
• resize values: Directives like ew-resize (East-West), ns-resize (North-South), or nwse-resize provide directional arrows for resizing panels.

• url(...): Allows you to load a custom image asset (like a `.png` or `.cur`) to use as a personalized cursor.
• initial: Reverts the cursor back to its default CSS property value.
• inherit: Forces the element to adopt the cursor type defined by its parent wrapper.

Below is a practical application showing how to apply intuitive pointer feedback to custom UI elements, including how to structure a custom fallback image cursor:

/* Make a div look explicitly clickable like a link */
.custom-button {
    cursor: pointer;
}

/* Perfect for maps, sliders, or re-orderable list items */
.draggable-card {
    cursor: grab;
}
.draggable-card:active {
    cursor: grabbing;
}

/* Setting up a custom branding cursor with an automatic fallback */
.branded-section {
    cursor: url('custom-pointer.png'), auto;
}
                

Using accurate cursor types is a core principle of digital usability and accessibility:

• **Affordance:** Clues the user into what actions are possible before they even attempt to click.
• **Clarity:** Eliminates confusion over whether custom styled `
  ` blocks function as active elements or static labels.
• **App State:** Instantly notifies users that a server request is processing when changing the screen state to a wait cursor.