/

HTML / CSS / JavaScript Tutorial

CSS Property: cursor

[this page | pdf | back links]

The CSS (CSS2) cursor property indicates the type of cursor to be displayed when pointing to an element. Usually this property is set in a manner that conventionally indicates what is likely to happen next (if the cursor is clicked).

 

Valid property values (other than inherit and initial) are:

 

Value

Description

alias

Indicates alias is to be created

all-scroll

Indicates that something can be scrolled in any direction

auto

(default value). Browser selects cursor format

cell

Indicates a cell (or set of cells) can be selected

context-menu

Indicates a context-menu is available

col-resize

Indicates column can be resized horizontally

copy

Indicates something to be copied

crosshair

Cursor appears as a crosshair

default

Cursor appears as the default cursor

e-resize

Indicates edge of box can be moved right (i.e. ‘east’)

ew-resize

Indicates a bidirectional resize cursor

grab

Indicates something can be grabbed

grabbing

Indicates something can be grabbed

help

Indicates help is available

move

Indicates can move something

n-resize

Indicates edge of box can be moved up (i.e. ‘north’)

ne-resize

Indicates edge of a box can be moved up and right (i.e. ‘north-east’)

nesw-resize

Indicates a bidirectional resize cursor

ns-resize

Indicates a bidirectional resize cursor

nw-resize

Indicates edge of a box can be moved up and left (i.e. ‘north-west’)

nwse-resize

Indicates a bidirectional resize cursor

no-drop

Indicates can’t drop dragged item here

none

No cursor shown

not-allowed

Indicates requested action won’t be executed

pointer

Indicates a link

progress

Indicates program is busy

row-resize

Indicates row can be resized vertically

s-resize

Indicates edge of box can be moved down (i.e. ‘south’)

se-resize

Indicates edge of a box can be moved down and right (i.e. ‘south-east’)

sw-resize

Indicates edge of a box can be moved down and left (i.e. ‘south-west’)

text

Indicates text may be selected

URL

A comma separated list of URLs pointing to custom cursors. You should ideally specify a generic cursor at the end of the list (in case none of the URL-defined cursors can be used)

vertical-text

Indicates vertical-text can be selected

w-resize

Indicates edge of box can be moved left (i.e. ‘west’)

wait

Indicates program is busy

zoom-in

Indicates something can be zoomed in

zoom-out

Indicates something can be zoomed out

 

Default Value:

auto

JavaScript syntax:

e.g. object.style.cursor="zoom-in"

Inherited:

Yes

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; border: thin solid red;}
p.x1 {cursor: no-drop}
</style>
</head>
<body>
Move cursor over element
<p>Element with default property</p>
<p class="x1">Property set using in-file HTML style</p>
<p id="x2">Property set using JavaScript</p>

<script>
document.getElementById("x2").style.cursor = "no-drop";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyCursor() {
  var x = document.createElement("DIV"); x.style.cursor = "no-drop"; return (window.getComputedStyle(x, null).cursor == "no-drop");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile