The cursor property in CSS is used to change the type of cursor that is displayed when the mouse pointer is over an element. This property can enhance user experience by indicating to users how they can interact with different parts of a webpage.

Syntax

element {
    cursor: value;
}

Common Values

1. auto:

   • Default cursor behavior. The browser determines the cursor based on the context of the element.
   • Example: cursor: auto;

2. default:

   • The default arrow pointer, typically used for non-interactive elements.
   • Example: cursor: default;

3. pointer:

   • A hand pointer, commonly used to indicate that an element is clickable (e.g., links or buttons).
   • Example: cursor: pointer;

4. text:

   • The I-beam (text) cursor, used to indicate text that can be selected.
   • Example: cursor: text;

5. move:

   • Indicates that the element can be moved.
   • Example: cursor: move;

6. not-allowed:

   • Indicates that the action is not allowed or the element is disabled.
   • Example: cursor: not-allowed;

7. help:

   • Indicates that help information is available.
   • Example: cursor: help;

8. wait:

   • Indicates that the system is busy, typically a spinning wheel or hourglass.
   • Example: cursor: wait;

9. crosshair:

   • A crosshair cursor, often used in design or image editing tools.
   • Example: cursor: crosshair;

10. none:

    • No cursor is displayed.
    • Example: cursor: none;

11. zoom-in / zoom-out:

    • Used to indicate that the user can zoom in or out.
    • Example: cursor: zoom-in;

12. grab / grabbing:

    • Indicates that an element can be grabbed or is currently being grabbed.
    • Example: cursor: grab; and cursor: grabbing;

Custom Cursor

You can also specify a custom image as a cursor using a URL.

element {
    cursor: url('path-to-image.png'), auto;
}

• The url() specifies the path to the image to be used as the cursor.
• The auto fallback ensures that a default cursor is displayed if the image is not available or not supported by the browser.

Example

Here is an example of how you might use the cursor property:

.button {
    cursor: pointer; /* Indicates the button is clickable */
}

.text-input {
    cursor: text; /* Indicates the user can type or select text */
}

.disabled {
    cursor: not-allowed; /* Indicates the element is disabled */
}

.custom-cursor {
    cursor: url('custom-cursor.png'), auto; /* Uses a custom cursor image */
}