Categories
Web development

CSS cursor Property

Learn how to use the CSS cursor Property.


CSS cursor Property

The CSS cursor property defines the mouse cursor that will be displayed when pointing over an element.

Demo:

Syntax:

cursor: value;

alias – the cursor specifies an alias of something is to be created.

<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
</style>
</head>
<body>

<p class="alias">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

all-scroll – the cursor specifies that something can be scrolled (in any direction).

<!DOCTYPE html>
<html>
<head>
<style>
.all-scroll {cursor: all-scroll;}
</style>
</head>
<body>


<p class="all-scroll">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

auto (default) – the browser settles a cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.auto {cursor: auto;}
</style>
</head>
<body>

<p class="auto">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

cell – the cursor specifies that a cell may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.cell {cursor: cell;}
</style>
</head>
<body>

<p class="cell">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

context-menu – the cursor specifies that a context-menu is available.

<!DOCTYPE html>
<html>
<head>
<style>
.context-menu {cursor: context-menu;}
</style>
</head>
<body>

<p class="context-menu">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

col-resize – the cursor specifies that the column can be resized horizontally.

<!DOCTYPE html>
<html>
<head>
<style>
.col-resize {cursor: col-resize;}
</style>
</head>
<body>

<p class="col-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

copy – the cursor specifies something is to be copied.

<!DOCTYPE html>
<html>
<head>
<style>
.copy {cursor: copy;}
</style>
</head>
<body>

<p class="copy">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

crosshair – the cursor render as a crosshair.

<!DOCTYPE html>
<html>
<head>
<style>
.crosshair {cursor: crosshair;}
</style>
</head>
<body>

<p class="crosshair">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

e-resize – the cursor specifies that an edge of a box is to be moved right (east).

<!DOCTYPE html>
<html>
<head>
<style>
.e-resize {cursor: e-resize;}
</style>
</head>
<body>

<p class="e-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ew-resize – specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.ew-resize {cursor: ew-resize;}
</style>
</head>
<body>

<p class="ew-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

grab – the cursor specifies that something can be grabbed.

<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grab; cursor: grab;}
</style>
</head>
<body>

<p class="grab">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

grabbing – the cursor specifies that something can be grabbed.

<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grabbing;cursor: grabbing;}
</style>
</head>
<body>

<p class="grabbing">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

help – the cursor specifies that help is available.

<!DOCTYPE html>
<html>
<head>
<style>
.help {cursor: help;}
</style>
</head>
<body>

<p class="help">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

move – the cursor specifies something is to be moved.

<!DOCTYPE html>
<html>
<head>
<style>
.move {cursor: move;}
</style>
</head>
<body>

<p class="move">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

n-resize – the cursor specifies that an edge of a box is to be moved up (north).

<!DOCTYPE html>
<html>
<head>
<style>
.n-resize {cursor: n-resize;}
</style>
</head>
<body>

<p class="n-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ne-resize – the cursor specifies that an edge of a box is to be moved up and right (north/east).

<!DOCTYPE html>
<html>
<head>
<style>
.ne-resize {cursor: ne-resize;}
</style>
</head>
<body>

<p class="ne-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nesw-resize specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.nesw-resize {cursor: nesw-resize;}
</style>
</head>
<body>

<p class="nesw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ns-resize specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.ns-resize {cursor: ns-resize;}
</style>
</head>
<body>

<p class="ns-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nw-resize – the cursor specifies that an edge of a box is to be moved up and left (north/west).

<!DOCTYPE html>
<html>
<head>
<style>
.nw-resize {cursor: nw-resize;}
</style>
</head>
<body>

<p class="nw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nwse-resize – specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.nwse-resize {cursor: nwse-resize;}
</style>
</head>
<body>

<p class="nwse-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

no-drop – the cursor specifies that the dragged item cannot be dropped here.

<!DOCTYPE html>
<html>
<head>
<style>
.no-drop {cursor: no-drop;}
</style>
</head>
<body>

<p class="no-drop">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

none – no cursor is rendered for the element.

<!DOCTYPE html>
<html>
<head>
<style>
.none {cursor: none;}
</style>
</head>
<body>

<p class="none">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

not-allowed – the cursor specifies that the requested action will not be executed.

<!DOCTYPE html>
<html>
<head>
<style>
.not-allowed {cursor: not-allowed;}
</style>
</head>
<body>

<p class="not-allowed">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

pointer – the cursor is a pointer and specifies a link.

<!DOCTYPE html>
<html>
<head>
<style>
.pointer {cursor: pointer;}
</style>
</head>
<body>

<p class="pointer">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

progress – the cursor specifies that the program is busy (in progress).

<!DOCTYPE html>
<html>
<head>
<style>
.progress {cursor: progress;}
</style>
</head>
<body>

<p class="progress">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

row-resize – the cursor specifies that the row can be resized vertically.

<!DOCTYPE html>
<html>
<head>
<style>
.row-resize {cursor: row-resize;}
</style>
</head>
<body>

<p class="row-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

s-resize – the cursor specifies that an edge of a box is to be moved down (south).

<!DOCTYPE html>
<html>
<head>
<style>
.s-resize {cursor: s-resize;}
</style>
</head>
<body>

<p class="s-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

se-resize – the cursor specifies that an edge of a box is to be moved down and right (south/east).

<!DOCTYPE html>
<html>
<head>
<style>
.se-resize {cursor: se-resize;}
</style>
</head>
<body>

<p class="se-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

sw-resize – the cursor specifies that an edge of a box is to be moved down and left (south/west).

<!DOCTYPE html>
<html>
<head>
<style>
.sw-resize {cursor: sw-resize;}
</style>
</head>
<body>

<p class="sw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

text – the cursor specifies the text that may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.text {cursor: text;}
</style>
</head>
<body>

<p class="text">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

URL – a comma-separated list of URLs to custom cursors – always define a generic cursor at the end of the list, in case none of the URL-defined cursors can be used.

<!DOCTYPE html>
<html>
<head>
<style>
.url {cursor: url(https://lenadesign.org/wp-content/uploads/2022/06/cursor.png),auto;}
</style>
</head>
<body>

<p class="url">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

vertical-text – the cursor specifies vertical-text that may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {cursor: vertical-text;}
</style>
</head>
<body>

<p class="vertical-text">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

w-resize – the cursor specifies that an edge of a box is to be moved left (west).

<!DOCTYPE html>
<html>
<head>
<style>
.w-resize {cursor: w-resize;}
</style>
</head>
<body>

<p class="w-resize;">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

wait – the cursor specifies that the program is busy.

<!DOCTYPE html>
<html>
<head>
<style>
.wait {cursor: wait;}
</style>
</head>
<body>

<p class="wait">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

zoom-in – the cursor specifies that something can be zoomed in.

<!DOCTYPE html>
<html>
<head>
<style>
.zoom-in {cursor: zoom-in;}
</style>
</head>
<body>

<p class="zoom-in">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

zoom-out – the cursor specifies that something can be zoomed out.

<!DOCTYPE html>
<html>
<head>
<style>
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>

<p class="zoom-out">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

Enjoy coding!

CSS caret-color Property

CSS @font-face Rule

CSS height Property