Do I need cursor: text on inputs?

No. Text fields show the I-beam on their own. Set it only when you build something field-like yourself.

What is the difference between text and auto?

auto shows the I-beam only over the text itself and the arrow elsewhere. text forces the I-beam over the whole element, padding and empty space included.

Does cursor: text work on iPad?

Yes. MDN notes it is the one value that visibly changes the iPad pointer, from a round dot to an I-beam.

cursor: text in CSS: the I-beam for selectable text

cursor: text; 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 text.

What it shows

Windows draws Text Select (the IBeam role), built into the default scheme rather than stored as a file. macOS shows the I-beam. Browsers already show it over selectable text and form fields under cursor: auto.

Usage

When to use it

Use it for

Custom editors built from divs, such as a code editor, where the I-beam should cover the padding and empty lines too.
The padding around a text field that you made clickable to focus the field.
Text inside a clickable card that people should still be able to copy, after the card sets pointer.
Click-to-edit labels, so the I-beam hints that clicking starts editing.

Avoid it for

Text you made unselectable with user-select: none. The I-beam promises something that will not happen.
Whole buttons or links.

Code

Copy the snippet

CSS

.editor { cursor: text; }

HTML

<div class="editor" tabindex="0">Click anywhere in this box to start typing.</div>

Support

Browsers and systems

Browser support for text
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	IBeam
Windows file	`built-in (no file in the default scheme)`
macOS	I-beam

Watch out

Gotchas

You rarely need to set it: auto already shows the I-beam over selectable text and fields.
In Chrome, text shows the sideways I-beam inside an element with a vertical writing-mode.
On iPad, text is the one keyword that changes the round pointer's shape.

Free cursors

A custom text cursor

The same cursor from each of our packs, free under CC0. Move your mouse over one to try it, or open it for the .cur file, the PNG and the CSS.

FAQ

Questions

Do I need cursor: text on inputs?: No. Text fields show the I-beam on their own. Set it only when you build something field-like yourself.
What is the difference between text and auto?: auto shows the I-beam only over the text itself and the arrow elsewhere. text forces the I-beam over the whole element, padding and empty space included.
Does cursor: text work on iPad?: Yes. MDN notes it is the one value that visibly changes the iPad pointer, from a round dot to an I-beam.

More