CSS Cursor Type — PBA Institute CSS Tutorial
Chapter 14 · CSS Tutorial Series
10 min read Beginner

CSS Cursor Type

The CSS cursor property changes the appearance of the mouse pointer when it hovers over an element. It provides visual feedback — telling the user what kind of interaction is possible (click, drag, wait, text selection, etc.).

Why Change the Cursor?

  • Better UX: A pointing cursor tells users the element is clickable.
  • Indicate state: A wait cursor shows the app is loading.
  • Show restrictions: A not-allowed cursor signals disabled actions.
  • Custom branding: Custom cursor images can match your design theme.

Popular Cursor Values

👆

pointer

Hand cursor — used for links and clickable items.

✋

default

The standard arrow cursor.

✏️

text

I-beam cursor used for text fields.

⏳

wait

Hourglass — loading or busy state.

🚫

not-allowed

Indicates an action is disabled.

🤚

grab / grabbing

Used for draggable elements.

➕

crosshair

Precision selection cursor.

❓

help

Indicates help is available on click.

Cursor Syntax

Cursor Syntax 
selector {
    cursor: pointer;
}

/* Custom cursor image */
selector {
    cursor: url("cursor.png"), auto;
}

Cursor Type

In CSS, the cursor property controls the mouse cursor appearance when hovering over elements. Different cursor styles improve user interaction and provide better visual feedback for clickable or interactive content.

Example 1 : Basic Cursor Types

This example demonstrates alias, all-scroll, and col-resize cursors.

Full HTML + CSS Code 
<html>

<head>

<style>

.alias{

    cursor:alias;
    color:tomato;

}

.all-scroll{

    cursor:all-scroll;
    color:tomato;

}

.col-resize{

    cursor:col-resize;
    color:tomato;

}

</style>

</head>

<body>

<h3 class="alias">
alias
</h3>

<h3 class="all-scroll">
all-scroll
</h3>

<h3 class="col-resize">
col-resize
</h3>

</body>

</html>
Output

alias

all-scroll

col-resize

  • alias: Displays shortcut style cursor.
  • all-scroll: Indicates movable scrolling area.
  • col-resize: Used for horizontal resizing.

Example 2 : Zoom Cursor Types

This example demonstrates zoom-in and zoom-out cursors.

Full HTML + CSS Code 
<html>

<head>

<style>

.zoom-in{

    cursor:zoom-in;
    color:tomato;

}

.zoom-out{

    cursor:zoom-out;
    color:tomato;

}

</style>

</head>

<body>

<h3 class="zoom-in">
zoom-in
</h3>

<h3 class="zoom-out">
zoom-out
</h3>

</body>

</html>
Output

zoom-in

zoom-out

  • zoom-in: Indicates zoom increase.
  • zoom-out: Indicates zoom decrease.

Example 3 : Interactive Cursor Types

This example demonstrates move, pointer, text, and wait cursors.

Full HTML + CSS Code 
<html>

<head>

<style>

.move{

    cursor:move;
    color:tomato;

}

.pointer{

    cursor:pointer;
    color:tomato;

}

.text{

    cursor:text;
    color:tomato;

}

.wait{

    cursor:wait;
    color:tomato;

}

</style>

</head>

<body>

<h3 class="move">
move
</h3>

<h3 class="pointer">
pointer
</h3>

<h3 class="text">
text
</h3>

<h3 class="wait">
wait
</h3>

</body>

</html>
Output

move

pointer

text

wait

  • move: Indicates draggable content.
  • pointer: Used for clickable links.
  • text: Indicates text selection.
  • wait: Indicates loading process.

Conclusion

CSS cursor properties improve website usability by providing clear visual feedback during user interaction. Different cursor types help users understand actions like clicking, moving, resizing, and loading.

Cursor Example

HTML + CSS Code 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Cursor Types</title>
    <style>
        body { font-family: Arial; padding: 30px; }
        .box {
            display: inline-block;
            padding: 12px 20px;
            margin: 6px;
            background: #1a73e8;
            color: white;
            border-radius: 6px;
        }
        .pointer  { cursor: pointer; }
        .text     { cursor: text; }
        .wait     { cursor: wait; }
        .not      { cursor: not-allowed; background: #aaa; }
        .grab     { cursor: grab; }
        .help     { cursor: help; }
        .cross    { cursor: crosshair; background: #d81b60; }
        .zoom     { cursor: zoom-in; background: #4CAF50; }
    </style>
</head>
<body>
    <div class="box pointer">pointer</div>
    <div class="box text">text</div>
    <div class="box wait">wait</div>
    <div class="box not">not-allowed</div>
    <div class="box grab">grab</div>
    <div class="box help">help</div>
    <div class="box cross">crosshair</div>
    <div class="box zoom">zoom-in</div>
</body>
</html>
Output Eight colorful boxes, each showing a different cursor type when hovered.

Code Explanation

  • cursor: pointer: Hand cursor — most common for clickable items.
  • cursor: text: I-beam cursor for text input fields.
  • cursor: not-allowed: Indicates the action is currently disabled.
  • Custom cursor: Use url() followed by a fallback like auto.

Cursor Value Reference

Value Appearance Use Case
default Arrow Standard pointer
pointer Hand Clickable items / links
text I-beam Text selection / inputs
wait Hourglass Loading state
help Question mark Tooltips, help icons
not-allowed Blocked sign Disabled buttons
grab / grabbing Open / closed hand Draggable elements
crosshair + cross Precise selection
zoom-in / zoom-out Magnifier Image zoom features
none No cursor Hide cursor (rare)

Cursor Categories

Clickable

pointer for buttons, links and CTAs.

Editing

text for inputs and text areas.

Disabled

not-allowed when an action is blocked.

Cursor Quick Reference

General
auto default none
Click
pointer help
Edit
text vertical-text cell
Drag
move grab grabbing

Important Notes

  • Don't overuse pointer: Only use it for genuinely clickable elements.
  • Add fallbacks for custom cursors: Browsers may not support .cur files everywhere.
  • Test on touch devices: Cursor changes don't apply on touchscreens.
  • Accessibility: Keep visual cues consistent — don't surprise users.

Real-World Use Cases

Links & Buttons

pointer tells users they can click.

Loading

wait shows the app is processing.

Drag & Drop

grab and grabbing for drag handles.

Practice Questions

  • Set the cursor to pointer for all buttons.
  • Use cursor: not-allowed for a disabled button.
  • Change the cursor to wait when a form is submitting.
  • Add a custom image as a cursor using url().
  • Use cursor: grab on a draggable card.

Frequently Asked Questions

  • What is the default cursor in CSS: cursor: default shows the standard arrow pointer.
  • How to make a pointer cursor: Use cursor: pointer on the element.
  • Can I use a custom cursor image: Yes — use cursor: url("image.png"), auto; with a fallback.
  • Does cursor work on mobile: No — cursor styles are only visible on devices with a mouse pointer.

Conclusion

The cursor property is a small detail that makes a big difference in usability. Choosing the right cursor tells users exactly what they can do — click, drag, wait, or get help — making your interface feel intuitive and polished.

CSS All Topics

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Continue Learning

Previous

Go to Transition Chapter

Next

Go to Navbar Chapter