path: root/files/it/web/css/cursor/index.html

---
title: cursor
slug: Web/CSS/cursor
tags:
  - CSS
  - CSS Property
  - Layout
  - NeedsBrowserCompatibility
  - NeedsLiveSample
  - NeedsMobileBrowserCompatibility
  - NeedsTranslation
  - Reference
  - TopicStub
  - Web
translation_of: Web/CSS/cursor
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Summary</h2>

<p>The <code>cursor</code> CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("cursor")}}
</pre>

<h3 id="Values" name="Values">Values</h3>

<dl>
 <dt>&lt;<code>uri</code>&gt;</dt>
 <dd>A <code>url(…)</code> or a comma separated list <code>url(…), url(…), …</code>, pointing to an image file. More than one {{cssxref("&lt;uri&gt;")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) <strong>must</strong> be at the end of the fallback list. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd>
 <dt><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> {{ experimental_inline() }}</dt>
 <dd>Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.</dd>
 <dt>Keyword values</dt>
 <dd>
 <p><strong style="color: red; font-size: big;">Move mouse over value for testing:</strong></p>

 <table class="standard-table">
  <tbody>
   <tr>
    <th>Category</th>
    <th>CSS value</th>
    <th> </th>
    <th>Description</th>
   </tr>
   <tr style="cursor: auto;">
    <td rowspan="3">General</td>
    <td><code>auto</code></td>
    <td> </td>
    <td>The browser determines the cursor to display based on the current context.<br>
     E.g. equivalent to <code>text</code> when hovering text.</td>
   </tr>
   <tr style="cursor: default;">
    <td><code>default</code></td>
    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
    <td>Default cursor, typically an arrow.</td>
   </tr>
   <tr style="cursor: none;">
    <td><code>none</code></td>
    <td> </td>
    <td>No cursor is rendered.</td>
   </tr>
   <tr style="cursor: context-menu;">
    <td rowspan="5" style="cursor: auto;">Links &amp; status</td>
    <td><code>context-menu</code></td>
    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
    <td>A context menu is available under the cursor.<br>
     Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.</td>
   </tr>
   <tr style="cursor: help;">
    <td><code>help</code></td>
    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
    <td>Indicating help is available.</td>
   </tr>
   <tr style="cursor: pointer;">
    <td><code>pointer</code></td>
    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
    <td>E.g. used when hovering over links, typically a hand.</td>
   </tr>
   <tr style="cursor: progress;">
    <td><code>progress</code></td>
    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
    <td>The program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>).</td>
   </tr>
   <tr style="cursor: wait;">
    <td><code>wait</code></td>
    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
    <td>The program is busy (sometimes an hourglass or a watch).</td>
   </tr>
   <tr style="cursor: cell;">
    <td rowspan="4" style="cursor: auto;">Selection</td>
    <td><code>cell</code></td>
    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
    <td>Indicating that cells can be selected.</td>
   </tr>
   <tr style="cursor: crosshair;">
    <td><code>crosshair</code></td>
    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
    <td>Cross cursor, often used to indicate selection in a bitmap.</td>
   </tr>
   <tr style="cursor: text;">
    <td><code>text</code></td>
    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
    <td>Indicating text can be selected, typically an I-beam.</td>
   </tr>
   <tr style="cursor: vertical-text;">
    <td><code>vertical-text</code></td>
    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
    <td>Indicating that vertical text can be selected, typically a sideways I-beam.</td>
   </tr>
   <tr style="cursor: alias;">
    <td rowspan="5" style="cursor: auto;">Drag and drop</td>
    <td><code>alias</code></td>
    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
    <td>Indicating an alias or shortcut is to be created.</td>
   </tr>
   <tr style="cursor: copy;">
    <td><code>copy</code></td>
    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
    <td>Indicating that something can be copied.</td>
   </tr>
   <tr style="cursor: move;">
    <td><code>move</code></td>
    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
    <td>The hovered object may be moved.</td>
   </tr>
   <tr style="cursor: no-drop;">
    <td><code>no-drop</code></td>
    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
    <td>Cursor showing that a drop is not allowed at the current location.<br>
     {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".</td>
   </tr>
   <tr style="cursor: not-allowed;">
    <td><code>not-allowed</code></td>
    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
    <td>Cursor showing that something cannot be done.</td>
   </tr>
   <tr style="cursor: all-scroll;">
    <td rowspan="15" style="cursor: auto;">Resize &amp; scrolling</td>
    <td><code>all-scroll</code></td>
    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
    <td>Cursor showing that something can be scrolled in any direction (panned).<br>
     {{ bug("275174") }} on Windows, "<em>all-scroll</em> is the same as <em>move</em>".</td>
   </tr>
   <tr style="cursor: col-resize;">
    <td><code>col-resize</code></td>
    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
    <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.</td>
   </tr>
   <tr style="cursor: row-resize;">
    <td><code>row-resize</code></td>
    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
    <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>
   </tr>
   <tr style="cursor: n-resize;">
    <td><code>n-resize</code></td>
    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
    <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.</td>
   </tr>
   <tr style="cursor: e-resize;">
    <td><code>e-resize</code></td>
    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: s-resize;">
    <td><code>s-resize</code></td>
    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: w-resize;">
    <td><code>w-resize</code></td>
    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: ne-resize;">
    <td><code>ne-resize</code></td>
    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: nw-resize;">
    <td><code>nw-resize</code></td>
    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: se-resize;">
    <td><code>se-resize</code></td>
    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: sw-resize;">
    <td><code>sw-resize</code></td>
    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: ew-resize;">
    <td><code>ew-resize</code></td>
    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
    <td rowspan="4" style="cursor: auto;">Indicates a bidirectional resize cursor.</td>
   </tr>
   <tr style="cursor: ns-resize;">
    <td><code>ns-resize</code></td>
    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: nesw-resize;">
    <td><code>nesw-resize</code></td>
    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
   </tr>
   <tr style="cursor: nwse-resize;">
    <td><code>nwse-resize</code></td>
    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
    <td rowspan="2">Zoom</td>
    <td><code>zoom-in</code></td>
    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
    <td rowspan="2" style="cursor: auto;">
     <p>Indicates that something can be zoomed (magnified) in or out.</p>
    </td>
   </tr>
   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
    <td><code>zoom-out</code></td>
    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
   </tr>
   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
    <td rowspan="2">Grab</td>
    <td><code>grab</code></td>
    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
    <td rowspan="2" style="cursor: auto;">
     <p>Indicates that something can be grabbed (dragged to be moved).</p>
    </td>
   </tr>
   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
    <td><code>grabbing</code></td>
    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h2 id="Examples" name="Examples">Examples</h2>

<pre class="brush:css">.foo { cursor: crosshair; }

/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }

/* standard cursor value as fallback for url() <u>must</u> be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }
</pre>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}</td>
   <td>{{ Spec2('CSS3 Basic UI') }}</td>
   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome (WebKit)</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td><code>auto</code>, <code>crosshair</code>, <code>default</code>, <code>move</code>, <code>text</code>, <code>wait</code>, <code>help</code>,<br>
    <code>n-resize</code>, <code>e-resize</code>, <code>s-resize</code>, <code>w-resize</code>,<br>
    <code>ne-resize</code>, <code>nw-resize</code>, <code>se-resize</code>, <code>sw-resize</code></td>
   <td>1.0</td>
   <td>1.0 (1.0)</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.2</td>
  </tr>
  <tr>
   <td><code>pointer</code>, <code>progress</code></td>
   <td>1.0</td>
   <td>1.0 (1.0 | 1.7)</td>
   <td>6.0</td>
   <td>7.x</td>
   <td>1.2 | 3.0</td>
  </tr>
  <tr>
   <td><code>url()</code> - See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values</a></td>
   <td>1.0 (523)</td>
   <td>1.5 (1.8);<br>
    OS X: 4.0 (2.0)</td>
   <td>6.0</td>
   <td>{{ CompatUnknown }}</td>
   <td>3.0</td>
  </tr>
  <tr>
   <td>Positioning syntax for <code>url()</code> values {{ experimental_inline() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>not-allowed</code>, <code>no-drop</code>, <code>vertical-text</code>, <code>all-scroll</code>,<br>
    <code>col-resize</code>, <code>row-resize</code></td>
   <td>1.0 (522)</td>
   <td>1.5 (1.8)</td>
   <td>6.0</td>
   <td>10.6</td>
   <td>3.0</td>
  </tr>
  <tr>
   <td><code>alias</code>, <code>cell</code>, <code>copy</code>,<br>
    <code>ew-resize</code>, <code>ns-resize</code>, <code>nesw-resize</code>, <code>nwse-resize</code></td>
   <td>1.0 (522)</td>
   <td>1.5 (1.8)</td>
   <td>10.0</td>
   <td>10.6</td>
   <td>3.0</td>
  </tr>
  <tr>
   <td><code>context-menu</code></td>
   <td>OS X, Linux: 1.0 (522)</td>
   <td>OS X, Linux: 1.5 (1.8)</td>
   <td>10.0</td>
   <td>10.6</td>
   <td>3.0</td>
  </tr>
  <tr>
   <td><code>none</code></td>
   <td>5.0 (533)</td>
   <td>3.0 (1.9)</td>
   <td>9.0</td>
   <td>{{ CompatUnknown }}</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td><code>inherit</code></td>
   <td>1.0</td>
   <td>1.0</td>
   <td>8.0</td>
   <td>9.0</td>
   <td>1.2</td>
  </tr>
  <tr>
   <td><code>zoom-in</code>, <code>zoom-out</code></td>
   <td>1.0 (522) {{ property_prefix("-webkit-") }}</td>
   <td>1.0 (1.4) {{ property_prefix("-moz-") }}<br>
    24.0</td>
   <td>{{ CompatNo }}</td>
   <td>11.6</td>
   <td>3.0 {{ property_prefix("-webkit-") }}</td>
  </tr>
  <tr>
   <td><code>grab</code>, <code>grabbing</code></td>
   <td>1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}</td>
   <td>1.5 (1.8) {{ property_prefix("-moz-") }}<br>
    27.0</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>4.0 {{ property_prefix("-webkit-") }}</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also" name="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
 <li>{{ cssxref("pointer-events") }}</li>
 <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
</ul>