CSS Tutorial

CSS Cursor

The CSS cursor property specifies the type of cursor to display when pointing over an element. This property helps in enhancing user experience by visually indicating the purpose or interactivity of an element.

Key Points on CSS Cursor:

The cursor property defines the cursor icon based on the element's intended functionality.
It supports various predefined cursor types like default, pointer, text, move, and more.
Custom cursor images can be set using the url() function, followed by a fallback cursor type.
The property applies to all elements and is inherited by default.
Cursors can vary between browsers, so testing is essential for consistency.
Supports interactivity hints, such as clickable areas (pointer) or draggable items (move).

Property	Description
Auto	The default setting for this attribute is to place the cursor.
Alias	This attribute is used to show the cursor's creation-related indicator.
All-scroll	The cursor in this attribute denotes scrolling.
Cell	The cursor in this property indicates that a cell or group of cells is currently chosen.
Context-menu	The cursor in this attribute shows the presence of a context menu.
Col-resize	When the cursor is above a column in this property, it may be resized horizontally.
Copy	The cursor in this property indicates that something has to be copied.
Crosshair	The cursor appears as a crosshair in this attribute.
Default	The default cursor.
E-resize	The cursor in this attribute indicates that a box's right-hand edge should be moved.
Ew-resize	The cursor in this attribute represents a bidirectional resizing cursor.
Help	In this property, the cursor shows that assistance is accessible.
Move	The pointer in this property implies that something has to be moved.
N-resize	When using the n-resize property, the pointer shows that a box's upper boundary should be shifted.
Ne-resize	With this property, the cursor shows that a box's edge should be shifted to the right and up.
New-resize	The bidirectional resize cursor is indicated by this attribute.
Ns-resize	A bidirectional resize cursor is indicated by the attribute ns-resize.
Nw-resize	The cursor in this attribute shows that a box's upper and lower edges are to be moved up and left.
Nose-resize	The bidirectional resize cursor is indicated by this attribute.
No-drop	The cursor in this attribute indicates that the pulled object cannot be dumped in this location.
None	A cursor is not displayed for the element according to this attribute.
Not-allowed	The cursor in this property indicates that the requested action won't be carried out.
Pointer	The cursor in this property serves as a pointer and displays link progress.
Progress	The cursor in this attribute shows that the program is active.
Row-resize	The cursor shows that this feature allows for vertical row resizing.
S-resize	When using this property, the pointer shows that a box's bottom boundary should be lowered.
Se-resize	The cursor in this attribute indicates that a box's edge should be shifted to the right and down.
Sw-resize	The cursor in this attribute indicates that a box's left and lower edges should be moved.
Text	The cursor in this attribute denotes text that may be chosen.
URL	This property contains a list of custom cursor URLs separated by commas and a generic cursor at the end of the list.
Vertical-text	The cursor in this attribute shows possible vertical-text selections.
W-resize	When using this property, the pointer shows that a box's left edge should be moved.

Syntax for CSS Cursor Property:

Syntax Example


        /* Basic Syntax */
        .element {
            cursor: value;
        }
        
        /* Example with predefined and custom cursor */
        .button {
            cursor: pointer; /* Pointer cursor for clickable buttons */
        }
        
        .custom-element {
            cursor: url('custom-cursor.png'), auto; /* Custom cursor with fallback */ 
        }

Examples of CSS Cursor:

The following examples demonstrate the usage of different cursor values:

Code Example: Pointer Cursor

.button {
            cursor: pointer; /* Indicates a clickable element */
        }

Output

Code Example: Custom Cursor


            .div {
            cursor: url('https://via.placeholder.com/35'), auto;
                 }

Output

Hover over this area to see a custom cursor.

Code Example: Text Cursor

.input[type="text"] {
            cursor: text; /* Indicates text input area */
        }

Output

Common Cursor Values:

default: The default arrow cursor.
pointer: A hand icon indicating a clickable element.
text: A text-selection cursor, usually an I-beam.
move: Indicates an item is movable.
wait: A spinning circle or hourglass, indicating a process is ongoing.
crosshair: A precision target cursor.
not-allowed: A circle with a line through it, indicating an action is not permitted.
grab: A hand icon indicating an item is draggable.
zoom-in: Indicates an area can be zoomed in.
zoom-out: Indicates an area can be zoomed out.

Using the cursor property effectively can enhance usability and provide clear visual feedback to users. Ensure accessibility and test cursor changes across different devices for optimal results.