A Guide to CSS Cursor Types

• Understanding CSS Cursor Types
  • 1. Default Cursors
  • 2. Link/Interactive Cursors
  • 3. Text Cursors
  • 4. Action Cursors
  • 5. Resize Cursors
  • 6. Zoom Cursors
  • 7. Custom Cursors
• Choosing the Right Cursor
• Browser Support and Considerations

The cursor is a small but crucial element in web design, offering immediate visual feedback about clickable elements, text selection, and actions. CSS allows you to control the cursor's appearance, providing users with intuitive cues about their interactions on a webpage. This guide delves into the various cursor types available in CSS, offering practical examples of how to use them to improve user experience.

Before we start, it's always worth giving Mozilla's MDN docs on cursor a quick scan read.

¶Understanding CSS Cursor Types

CSS cursor properties allow you to specify the mouse cursor displayed to the user when they hover over an element. The cursor property can take various values, each indicating a different cursor type or shape. Here’s an overview of the common CSS cursor types and their intended uses:

¶1. Default Cursors

• default: The standard arrow cursor, used when no other cursor is specified.

.element { cursor: default; }

• none: Hides the cursor, useful in immersive experiences like games.

.element { cursor: none; }

¶2. Link/Interactive Cursors

• pointer: A hand icon, indicating a link or clickable element.

.button { cursor: pointer; }

¶3. Text Cursors

• text: Indicates text that can be selected, showing an I-beam cursor.

.editable-text { cursor: text; }

• vertical-text: Similar to text, but for vertical text selection.

.vertical-text { cursor: vertical-text; }

¶4. Action Cursors

• move: Indicates something can be moved, showing a cross with arrows.

.draggable { cursor: move; }

• progress: Indicates that the application is busy but can still be interacted with, often shown as an arrow with a small hourglass or spinner.

.loading { cursor: progress; }

• wait: A system-based cursor indicating that the application is busy and the user must wait, typically an hourglass or a spinning circle.

.element { cursor: wait; }

¶5. Resize Cursors

• n-resize, e-resize, s-resize, w-resize: Indicate that an element can be resized in the north, east, south, or west direction respectively.

.resizable { cursor: n-resize; }

• ne-resize, nw-resize, se-resize, sw-resize: Indicate diagonal resizing.

.resizable { cursor: nw-resize; }

• col-resize, row-resize: Indicate that the item can be resized horizontally (columns) or vertically (rows).

.resizable-column { cursor: col-resize; }

¶6. Zoom Cursors

• zoom-in, zoom-out: Indicate that an item can be zoomed in or out.

.zoomable-image { cursor: zoom-in; }

¶7. Custom Cursors

• url: Specifies a custom cursor image.

.custom-cursor { cursor: url('path/to/cursor.png'), default; }

The url function is followed by a fallback cursor, in case the custom cursor cannot be displayed.

¶Choosing the Right Cursor

Selecting the appropriate cursor type is essential for user experience. Use cursors that intuitively match the action or result of interacting with an element. Misuse of cursors can confuse users, so stick to conventions for common interactions.

¶Browser Support and Considerations

Most cursor types are widely supported across modern browsers. However, custom cursors (using url) have some limitations and performance considerations. Ensure custom cursors are not overly large in file size and provide a standard cursor as a fallback.