What is the difference between cursor: auto and cursor: default?

auto changes with the content: an I-beam over selectable text, a hand over links, the arrow elsewhere. default is always the platform arrow, even over text.

Is auto the initial value of cursor?

Yes. Every element starts with cursor: auto. Because cursor is inherited, a child picks up whatever its parent sets until you reset it.

Why does my button show the arrow with cursor: auto?

Browsers only switch to the hand over links. A button or a div keeps the arrow under auto. Add cursor: pointer if your design system wants the hand on buttons.

General

cursor: auto in CSS: let the browser pick the cursor

auto is where every element starts. The browser looks at what is under the pointer and picks for you, so you only set it to undo a cursor that something else applied.

cursor: auto; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for auto.

What it shows

Over text you can select or edit, you get the I-beam (Windows Text Select, the macOS I-beam). Over a link, the browser shows the pointing hand on its own. Everywhere else you see the platform arrow (Windows Normal Select, the macOS Arrow). Browsers may also keep their own cursors over scrollbars, resize grips and native controls, whatever you set.

Usage

When to use it

Use it for

Reset a child back to normal when a parent sets a cursor, for example the paragraph inside a clickable card that people should still be able to select.
Leave body copy and form fields alone. auto already gives readers the I-beam exactly where they can select or type.
End a url() list with auto when you want the browser's own judgement if your image fails to load.
Undo a cursor that a framework, a reset stylesheet or a page builder set, without guessing which keyword it replaced.

Avoid it for

On a clickable element that is not a link, such as a div with a click handler or a custom toggle. auto shows the arrow there; use a real button and give it pointer.
When you want the arrow even over text, such as labels in an app toolbar. That is what default is for.

Code

Copy the snippet

CSS

.card { cursor: pointer; }
.card p { cursor: auto; }

HTML

<article class="card">
  <h3>Clickable card</h3>
  <p>Hover this sentence: the I-beam comes back.</p>
</article>

Support

Browsers and systems

Browser support for auto
Browser	Support
Chrome	1
Edge	12
Firefox	1
Safari	1.2
Safari on iOS	13.4
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	Arrow or IBeam, depending on content
Windows file	`aero_arrow.cur (the IBeam is built in)`
macOS	Arrow or I-beam

Watch out

Gotchas

cursor is inherited. Setting auto on a child undoes the parent's cursor for that child and everything inside it.
The hand over links comes from the browser, not from your CSS. A div with a click handler gets no such help.
You only see a difference between auto and default over text: auto shows the I-beam, default keeps the arrow.

FAQ

Questions

What is the difference between cursor: auto and cursor: default?: auto changes with the content: an I-beam over selectable text, a hand over links, the arrow elsewhere. default is always the platform arrow, even over text.
Is auto the initial value of cursor?: Yes. Every element starts with cursor: auto. Because cursor is inherited, a child picks up whatever its parent sets until you reset it.
Why does my button show the arrow with cursor: auto?: Browsers only switch to the hand over links. A button or a div keeps the arrow under auto. Add cursor: pointer if your design system wants the hand on buttons.