Cursor appearance

The property cursor sets the type of cursor to be displayed for the pointing device.

The cursor property contains following information:

value: [[<uri>,]* [auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress]] or inherit;
initial: auto;
applies to: all elements;
inherited: yes;
percentages: N/A;
media: visual, interactive;
computed value: as specified.

The value auto sets the cursor to the browser default symbol. Other values are used as their meaning suggests, i.e. pointer indicates a link, resize group indicates that an element may be resized in given direction, wait indicates that the program is busy; etc... The uri value may be set to one or more URI resources, with the browser choosing the first one possible to render.

Example

CSS cursors example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div.point {
	cursor:pointer;
}
div.uri {
	cursor:url("../../../img/tutorials/cursor_ex1.png"), crosshair;
}
div {
	position:relative; margin-top:30px; width:90%; height:100px;
	border:1px solid gray;
}
</style>
</head>

<body>

<div class="point">This box has cursor modified from 'default' to 'pointer'.</div>
<div class="uri">This box has cursor modified from 'default' to 'uri' or, if not possible to load, 'crosshair'.</div>

</body>
</html>

›› go to examples ››

Example

CSS cursors example:

Comments

About

Contact

Get Connected