Selection
cursor: cell in CSS: the spreadsheet plus
cell is the thick plus you know from spreadsheets. It says 'you can select this cell, or drag across a range of them'.
cursor: cell; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one. What it shows
A chunky plus sign, usually white with a dark edge. Windows has no system role for it, so Chrome, Edge and Firefox ship their own image. macOS has a matching cell cursor that browsers use.
Usage
When to use it
Use it for
- Grids where clicking selects a cell and dragging selects a range: spreadsheets, timetables, seat maps.
- Data tables that support copying a block of cells, as opposed to selecting whole rows.
- Pixel editors and calendar pickers where each square can be picked on its own.
Avoid it for
- Precise pointing on images, maps or canvases. crosshair is clearer there.
- Tables whose rows open a detail view. Use pointer on the row instead.
Code
Copy the snippet
.sheet td { cursor: cell; }
.sheet td.is-editing { cursor: text; } <table class="sheet">
<tr><td>A1</td><td>B1</td></tr>
<tr><td>A2</td><td class="is-editing">B2</td></tr>
</table> Support
Browsers and systems
| Browser | Support |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1.5 |
| Safari | 3 |
| Safari on iOS | 13.4 |
| Chrome on Android | 18 |
| System | Matching cursor |
|---|---|
| Windows role | none (browser-supplied) |
| Windows file | none |
| macOS | Cell (thick plus) |
Watch out
Gotchas
- Switch the cell being edited to cursor: text so the I-beam returns while people type.
- MDN's data lists cell as working on iPad with a trackpad (iOS Safari 13.4), one of the few keywords that does.
FAQ
Questions
- What does cursor: cell look like?
- A thick plus sign, usually white with a dark outline, like the one in desktop spreadsheet apps.
- Is cell the same as crosshair?
- No. crosshair is two thin lines for hitting an exact point. cell is a chunky plus for picking whole cells.
- Does Windows have a cell cursor I can customise?
- Not among the 17 Windows cursor roles. Chrome, Edge and Firefox draw their own, so it still shows on Windows, but a Windows cursor scheme cannot change it.
More