Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 20459 of cursor

  • Revision slug: CSS/cursor
  • Revision title: CSS cursor
  • Revision id: 20459
  • Created:
  • Creator: Taken
  • Is current revision? No
  • Comment /* Values */ cursor:none is now supported {{bug|346690}}

Revision Content

{{template.CSSRef()}}

Summary

The {{template.Cssxref("cursor")}} property specifies the mouse cursor displayed when the mouse pointer is over an element.

  • {{template.Xref_cssinitial()}}: {{template.Cssxref("auto")}}
  • Applies to: all elements
  • {{template.Xref_cssinherited()}}: Yes
  • Percentages: N/A
  • Media: {{template.Xref_cssvisual()}}, {{template.Xref_cssinteractive()}}
  • {{template.Xref_csscomputed()}}: as specified (with relative URLs converted to absolute URLs)

Syntax

cursor: std-cursor-name> | [<url> ,]*  <url> | {{template.Cssxref("inherit")}} ;
cursor: [<url> ,]*  <std-cursor-name> ;

Values

<url> 
URL of custom cursor. More than one URL may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
<std-cursor-name>
a standard cursor name 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, copy, alias, context-menu, cell, not-allowed, col-resize, row-resize, no-drop, vertical-text, all-scroll, nesw-resize, nwse-resize, ns-resize, ew-resize, none
default 
default cursor (typically an arrow)
auto 
equivalent to text when over text and default otherwise
crosshair 
cross cursor, often used to indicate selection in a bitmap
pointer 
cursor used when over links (typically a hand)
move 
move cursor
e-resize 
cursor for resizing the right edge of a box
ne-resize 
cursor for resizing the top right corner of a box
nw-resize 
cursor for resizing the top left corner of a box
n-resize 
cursor for resizing the top edge of a box
se-resize 
cursor for resizing the bottom right corner of a box
sw-resize 
cursor for resizing the bottom left corner of a box
s-resize 
cursor for resizing the bottom edge of a box
w-resize 
cursor for resizing the left edge of a box
text 
cursor indicating text can be selected (typically an I-beam)
wait 
cursor indicating the program is busy (sometimes an hourglass or a watch)
help 
cursor indicating help is available
progress 
cursor indicating that the program is busy but the user can still interact with it (unlike for busy)
copy 
cursor showing something that can be copied
alias 
cursor indicating an alias or shortcut is to be created
context-menu 
cursor indicating that a context menu is available under the cursor
cell 
cursor indicating that cells can be selected
not-allowed 
cursor showing that something cannot be done
col-resize 
cursor for resizing columns horizontally
row-resize 
cursor for resizing rows vertically
no-drop 
cursor showing that a drop is not allowed at the current location
vertical-text 
cursor indicating that vertical text can be selected (typically a sideways I-beam)
all-scroll 
cursor showing that something can be scrolled in any direction (panned)
nesw-resize 
cursor for resizing in the top-right or bottom-left directions
nwse-resize 
cursor for resizing in the top-left or bottom-right directions
ns-resize 
cursor for resizing up or down
ew-resize 
cursor for resizing left or right
none 
no cursor is rendered {{template.Fx_minversion_inline(3)}}

Examples

{{template.CSSRefExampleLink("cursor")}}

Inline:

<span style="cursor: crosshair">Some Text</span>

External:

.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}

Notes

While this property works on older browsers, not all values are fully supported.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1.5
Netscape 6
Opera 7

See also

{{ wiki.languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The {{template.Cssxref("cursor")}} property specifies the mouse cursor displayed when the mouse pointer is over an element.
</p>
<ul><li> {{template.Xref_cssinitial()}}: {{template.Cssxref("auto")}}
</li><li> Applies to: all elements
</li><li> {{template.Xref_cssinherited()}}: Yes
</li><li> Percentages: N/A
</li><li> Media: {{template.Xref_cssvisual()}}, {{template.Xref_cssinteractive()}}
</li><li> {{template.Xref_csscomputed()}}: as specified (with relative URLs converted to absolute URLs)
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">cursor: std-cursor-name&gt; | [&lt;url&gt; ,]*  &lt;url&gt; | {{template.Cssxref("inherit")}} ;
</pre>
<pre class="eval">cursor: [&lt;url&gt; ,]*  &lt;std-cursor-name&gt; ;
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> &lt;url&gt; </dt><dd> URL of custom cursor.  More than one URL may be provided as fallback, in case some cursor image types are not supported.  A non-URL fallback (one of the other values) must be at the end of the fallback list.  See <a href="en/Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.
</dd><dt>&lt;std-cursor-name&gt;
</dt><dd> a standard cursor name <code>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, copy, alias, context-menu, cell, not-allowed, col-resize, row-resize, no-drop, vertical-text, all-scroll, nesw-resize, nwse-resize, ns-resize, ew-resize, none</code>
</dd><dt> <code>default</code> </dt><dd> default cursor (typically an arrow)
</dd><dt> <code>auto</code> </dt><dd> equivalent to <code>text</code> when over text and <code>default</code> otherwise
</dd><dt> <code>crosshair</code> </dt><dd> cross cursor, often used to indicate selection in a bitmap
</dd><dt> <code>pointer</code> </dt><dd> cursor used when over links (typically a hand)
</dd><dt> <code>move</code> </dt><dd> move cursor
</dd><dt> <code>e-resize</code> </dt><dd> cursor for resizing the right edge of a box
</dd><dt> <code>ne-resize</code> </dt><dd> cursor for resizing the top right corner of a box
</dd><dt> <code>nw-resize</code> </dt><dd> cursor for resizing the top left corner of a box
</dd><dt> <code>n-resize</code> </dt><dd> cursor for resizing the top edge of a box
</dd><dt> <code>se-resize</code> </dt><dd> cursor for resizing the bottom right corner of a box
</dd><dt> <code>sw-resize</code> </dt><dd> cursor for resizing the bottom left corner of a box
</dd><dt> <code>s-resize</code> </dt><dd> cursor for resizing the bottom edge of a box
</dd><dt> <code>w-resize</code> </dt><dd> cursor for resizing the left edge of a box
</dd><dt> <code>text</code> </dt><dd> cursor indicating text can be selected (typically an I-beam)
</dd><dt> <code>wait</code> </dt><dd> cursor indicating the program is busy (sometimes an hourglass or a watch)
</dd><dt> <code>help</code> </dt><dd> cursor indicating help is available
</dd><dt> <code>progress</code> </dt><dd> cursor indicating that the program is busy but the user can still interact with it (unlike for <code>busy</code>)
</dd><dt> <code>copy</code> </dt><dd> cursor showing something that can be copied
</dd><dt> <code>alias</code> </dt><dd> cursor indicating an alias or shortcut is to be created
</dd><dt> <code>context-menu</code> </dt><dd> cursor indicating that a context menu is available under the cursor
</dd><dt> <code>cell</code> </dt><dd> cursor indicating that cells can be selected
</dd><dt> <code>not-allowed</code> </dt><dd> cursor showing that something cannot be done
</dd><dt> <code>col-resize</code> </dt><dd> cursor for resizing columns horizontally
</dd><dt> <code>row-resize</code> </dt><dd> cursor for resizing rows vertically
</dd><dt> <code>no-drop</code> </dt><dd> cursor showing that a drop is not allowed at the current location
</dd><dt> <code>vertical-text</code> </dt><dd> cursor indicating that vertical text can be selected (typically a sideways I-beam)
</dd><dt> <code>all-scroll</code> </dt><dd> cursor showing that something can be scrolled in any direction (panned)
</dd><dt> <code>nesw-resize</code> </dt><dd> cursor for resizing in the top-right or bottom-left directions
</dd><dt> <code>nwse-resize</code> </dt><dd> cursor for resizing in the top-left or bottom-right directions
</dd><dt> <code>ns-resize</code> </dt><dd> cursor for resizing up or down
</dd><dt> <code>ew-resize</code> </dt><dd> cursor for resizing left or right
</dd><dt> <code>none</code> </dt><dd> no cursor is rendered {{template.Fx_minversion_inline(3)}}
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("cursor")}}
</p>
<pre>Inline:

&lt;span style="cursor: crosshair"&gt;Some Text&lt;/span&gt;

External:

.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}

</pre>
<h3 name="Notes"> Notes </h3>
<p>While this property works on older browsers, not all values are fully supported.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1.5</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>7</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
{{ wiki.languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor" } ) }}
Revert to this revision