HTML Guides for cursor

The CSS cursor property does not accept arrow as a value. To show the standard arrow pointer, use cursor: default, which is the platform's default cursor on most systems.

The cursor property sets the mouse pointer shown when the pointer is over an element. Its keywords are spelled out in the CSS specification, and arrow is not among them. The name people reach for is intuitive, since the everyday pointer is an arrow, but the keyword that produces it is default. When the validator meets cursor: arrow, it rejects the whole declaration, so the browser ignores it and falls back to whatever cursor it would have used anyway.

This usually goes unnoticed because the default cursor already is an arrow, so nothing looks broken. The cost shows up when you set cursor: arrow to override an inherited value, for example to reset the pointer back to normal inside an element that set cursor: pointer. The invalid declaration is dropped and the inherited cursor stays in place.

Invalid example

The value arrow is not recognized and triggers a validation error:

<div style="cursor: arrow;">

Hover over me

</div>

Valid example

Use default to get the standard arrow pointer:

<div style="cursor: default;">

Hover over me

</div>

The CSS cursor property controls the appearance of the mouse pointer when it hovers over an element. The value hand was introduced by early versions of Internet Explorer (IE 5.5 and earlier) as a proprietary extension to show a pointing-hand cursor over clickable elements. However, this value was never part of any CSS specification, and no other browser adopted it. The W3C-standard equivalent is pointer, which has been supported by all browsers — including Internet Explorer 6 and later — for over two decades.

When the W3C validator encounters cursor: hand, it flags it as an invalid value because hand does not exist in the CSS specification's list of accepted cursor values. While some legacy browsers may still interpret it, modern browsers will simply ignore the invalid declaration, meaning your clickable elements won't display the expected hand cursor for many users.

Beyond validation, using non-standard CSS values can cause inconsistent behavior across browsers and platforms. The pointer value is universally supported and is the correct way to signal that an element is interactive, such as a link, button, or any custom clickable region.

To fix this issue, replace every instance of cursor: hand with cursor: pointer in your stylesheets. If you need to support extremely old versions of Internet Explorer (IE 5.5 or earlier), you can declare both values — the browser will use whichever it recognizes — though this is almost never necessary today.

Examples

Invalid CSS

The value hand is not recognized by the CSS specification and will trigger a validation error:

.clickable {

cursor: hand;

}

Valid CSS

Use the standard pointer value instead:

.clickable {

cursor: pointer;

}

Using it in context with HTML

<style>

.card {

padding: 16px;

border: 1px solid #ccc;

cursor: pointer;

}

</style>

<div class="card">

Click me to view details

</div>

Legacy fallback (rarely needed)

If for some reason you must support IE 5.5 or earlier alongside modern browsers, you can provide both declarations. The browser will apply the last value it understands:

.clickable {

cursor: hand;

cursor: pointer;

}

Note that this fallback pattern will still produce a validation warning for the hand value. In practice, there is virtually no reason to support browsers this old, so using cursor: pointer alone is the recommended approach.

Common cursor values

For reference, here are some of the most frequently used valid cursor values defined in the CSS specification:

• auto — the browser determines the cursor based on context (default behavior)
• default — the platform's default cursor, typically an arrow
• pointer — a pointing hand, indicating a link or clickable element
• text — an I-beam, indicating selectable text
• move — indicates something can be moved
• not-allowed — indicates an action is not permitted
• grab / grabbing — indicates a draggable element
• crosshair — a precise selection cursor
• wait — indicates the program is busy
• help — indicates help is available

The full list of accepted values is defined in the CSS Basic User Interface Module specification.

The value given to the CSS cursor property is not one the specification allows, so browsers ignore the whole declaration.

The cursor property sets the pointer shown while the mouse is over an element. It accepts a fixed list of keywords, such as auto, default, pointer, text, move, help, wait, not-allowed, grab and zoom-in. Any other word is rejected, including names that sound plausible: hand, arrow, link and head are not cursor keywords. Typos and values copied from another property end up here too.

When a browser meets an unknown value, it drops the declaration and keeps the cursor the element would have had anyway, usually the inherited one or auto. A button meant to show a pointing hand ends up with the plain arrow, and nothing in the page tells you why.

The same message appears for a custom cursor image with no fallback. A url() value must be followed by a comma and a keyword, which the browser uses when the image can't be loaded. cursor: url(magnifier.png) is invalid, while cursor: url(magnifier.png), zoom-in is valid.

To fix it, replace the value with the keyword that matches what the element does (pointer for clickable elements, default for the standard arrow, text for selectable text), and end every list of url() images with a keyword.

Invalid example

The first declaration uses a word that isn't a cursor keyword, and the second has an image with no fallback:

<button type="button" style="cursor: head;">Open menu</button>

<img src="harbor.jpg" alt="Harbor at sunset" style="cursor: url(magnifier.png);">

Valid example

<button type="button" style="cursor: pointer;">Open menu</button>

<img src="harbor.jpg" alt="Harbor at sunset" style="cursor: url(magnifier.png), zoom-in;">