In this tutorial, I’m going to show you how-to customize the cursor CSS property. The cursor CSS property controls what the mouse cursor will look like when the mouse pointer is over an element.(Hover over the description text to see what the cursor looks like.)

Indicates an alias or shortcut is to be created:
.alias {
    cursor: alias;
}
Indicates you can scroll in any direction:
.all-scroll {
    cursor: all-scroll;
}
Indicates that the web browser will determine the cursor:
.auto {
    cursor: auto;
}
Indicates that cells can be selected:
.cell {
    cursor: cell;
}
Indicates that a column can be resized horizontally:
.col-resize {
    cursor: col-resize;
}
Indicates a context menu is available:
.context-menu {
    cursor: context-menu;
}
Indicates the ability to copy:
.copy {
    cursor: copy;
}
Indicates a selection:
.crosshair {
    cursor: crosshair;
}
Default cursor:
.default {
    cursor: default;
}
Indicates a row can be resized to the east:
.e-resize {
    cursor: e-resize;
}
Indicates when movement starts from the east-west corner:
.ew-resize {
    cursor: ew-resize;
}
Indicates help is available:
.help {
    cursor: help;
}
Indicates an object may be moved:
.move {
    cursor: move;
}
Indicates a row can be resized to the north:
.n-resize {
    cursor: n-resize;
}
Indicates when movement starts from the north-east corner:
.ne-resize {
    cursor: ne-resize;
}
Indicates a north-east and south-west bidirectional resize cursor:
.nesw-resize {
    cursor: nesw-resize;
}
Indicates a drop is not allowed:
.no-drop {
    cursor: no-drop;
}
Indicates no cursor will be rendered:
.none {
    cursor: none;
}
Indicates something cannot be done:
.not-allowed {
    cursor: not-allowed;
}
Indicates when movement starts from north and south:
.ns-resize {
    cursor: ns-resize;
}
Indicates when movement starts from the north-west corner:
.nw-resize {
    cursor: nw-resize;
}
Indicates a north-west and south-east bidirectional resize cursor:
.nwse-resize {
    cursor: nwse-resize;
}
Points at something or an object:
.pointer {
    cursor: pointer;
}
Indicates a program is busy in the background but the front-end is available:
.progress {
    cursor: progress;
}
Indicates a row can be resized vertically:
.row-resize {
    cursor: row-resize;
}
Indicates a row can be resized to the south:
.s-resize {
    cursor: s-resize;
}
Indicates when movement starts from the south-east corner:
.se-resize {
    cursor: se-resize;
}
Indicates when movement starts from the south-west corner:
.sw-resize {
    cursor: sw-resize;
}
Indicates that text can be selected:
.text {
    cursor: text;
}
Indicates that vertical text can be selected:
.vertical-text {
    cursor: vertical-text;
}
Indicates a row can be resized to the west:
.w-resize {
    cursor: w-resize;
}
Indicates program is busy, even the front-end:
.wait {
    cursor: wait;
}

Custom Cursor

You can create a custom cursor using the cursor CSS property like so:

/* Custom Cursors */

.custom {
   cursor: url(custom.png), auto;
}

You can change the CSS class .custom to whatever you like.

HTML

The HTML to implement one of the CSS classes above, would be:

<div class="default">...</div>

Change default to the CSS class.

The cursor CSS property helps convey functionality, so use it as needed and appropriately.
.alias{cursor:alias}.all-scroll{cursor:all-scroll}.auto{cursor:auto}.cell{cursor:cell}.col-resize{cursor:col-resize}.context-menu{cursor:context-menu}.copy{cursor:copy}.crosshair{cursor:crosshair}.default{cursor:default}.e-resize{cursor:e-resize}.ew-resize{cursor:ew-resize}.help{cursor:help}.move{cursor:move}.n-resize{cursor:n-resize}.ne-resize{cursor:ne-resize}.nesw-resize{cursor:nesw-resize}.no-drop{cursor:no-drop}.none{cursor:none}.not-allowed{cursor:not-allowed}.ns-resize{cursor:ns-resize}.nw-resize{cursor:nw-resize}.nwse-resize{cursor:nwse-resize}.pointer{cursor:pointer}.progress{cursor:progress}.row-resize{cursor:row-resize}.s-resize{cursor:s-resize}.se-resize{cursor:se-resize}.sw-resize{cursor:sw-resize}.text{cursor:text}.vertical-text{cursor:vertical-text}.w-resize{cursor:w-resize}.wait{cursor:wait}