# CSS: “cursor”: X is not a “cursor” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-cursor-x-is-not-a-cursor-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

```html
<button type="button" style="cursor: head;">Open menu</button>
<img src="harbor.jpg" alt="Harbor at sunset" style="cursor: url(magnifier.png);">
```

## Valid example

```html
<button type="button" style="cursor: pointer;">Open menu</button>
<img src="harbor.jpg" alt="Harbor at sunset" style="cursor: url(magnifier.png), zoom-in;">
```
