Skip to content

Instantly share code, notes, and snippets.

@ffried

ffried/cursor-test.html

Last active December 17, 2025 08:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ffried/8446e04fc33d414ca74885b616799f72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ffried/8446e04fc33d414ca74885b616799f72 to your computer and use it in GitHub Desktop.
Download ZIP
Safari Cursor Support
Raw
cursor-test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Cursor Test</title>
<style>
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
h1,
h2 {
margin-left: 1rem;
}
.flex-box {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
row-gap: 0.35rem;
margin: 1rem;
}
.box {
background-color: lightgray;
border: 1px solid black;
padding: 0.5rem;
}
.box.working {
background-color: lightgreen;
border-color: green;
}
.box.not-working {
background-color: lightcoral;
border-color: red;
}
</style>
</head>
<body>
<h1>Cursors</h1>
<h2>Safari 26.2&nbsp;<small>(21623.1.14.11.9)</small></h2>
<div class="flex-box">
<div class="box working" style="cursor: context-menu">context-menu</div>
<div class="box not-working" style="cursor: help">help</div>
<div class="box working" style="cursor: pointer">pointer</div>
<div class="box not-working" style="cursor: progress">progress</div>
<div class="box not-working" style="cursor: wait">wait</div>
<div class="box not-working" style="cursor: cell">cell</div>
<div class="box working" style="cursor: crosshair">crosshair</div>
<div class="box working" style="cursor: text">text</div>
<div class="box working" style="cursor: vertical-text">vertical-text</div>
<div class="box not-working" style="cursor: alias">alias</div>
<div class="box working" style="cursor: copy">copy</div>
<div class="box not-working" style="cursor: move">move</div>
<div class="box working" style="cursor: no-drop">no-drop</div>
<div class="box working" style="cursor: not-allowed">not-allowed</div>
<div class="box working" style="cursor: grab">grab</div>
<div class="box working" style="cursor: grabbing">grabbing</div>
<div class="box not-working" style="cursor: e-resize">e-resize</div>
<div class="box not-working" style="cursor: n-resize">n-resize</div>
<div class="box not-working" style="cursor: ne-resize">ne-resize</div>
<div class="box not-working" style="cursor: nw-resize">nw-resize</div>
<div class="box not-working" style="cursor: s-resize">s-resize</div>
<div class="box not-working" style="cursor: se-resize">se-resize</div>
<div class="box not-working" style="cursor: sw-resize">sw-resize</div>
<div class="box not-working" style="cursor: w-resize">w-resize</div>
<div class="box not-working" style="cursor: ew-resize">ew-resize</div>
<div class="box not-working" style="cursor: ns-resize">ns-resize</div>
<div class="box not-working" style="cursor: nesw-resize">nesw-resize</div>
<div class="box not-working" style="cursor: nwse-resize">nwse-resize</div>
<div class="box working" style="cursor: col-resize">col-resize</div>
<div class="box working" style="cursor: row-resize">row-resize</div>
<div class="box not-working" style="cursor: all-scroll">all-scroll</div>
<div class="box not-working" style="cursor: zoom-in">zoom-in</div>
<div class="box not-working" style="cursor: zoom-out">zoom-out</div>
</div>
<h2>Safari 26.1&nbsp;<small>(21622.2.11.11.9)</small></h2>
<div class="flex-box">
<div class="box working" style="cursor: context-menu">context-menu</div>
<div class="box working" style="cursor: help">help</div>
<div class="box working" style="cursor: pointer">pointer</div>
<div class="box working" style="cursor: progress">progress</div>
<div class="box working" style="cursor: wait">wait</div>
<div class="box working" style="cursor: cell">cell</div>
<div class="box working" style="cursor: crosshair">crosshair</div>
<div class="box working" style="cursor: text">text</div>
<div class="box working" style="cursor: vertical-text">vertical-text</div>
<div class="box working" style="cursor: alias">alias</div>
<div class="box working" style="cursor: copy">copy</div>
<div class="box working" style="cursor: move">move</div>
<div class="box working" style="cursor: no-drop">no-drop</div>
<div class="box working" style="cursor: not-allowed">not-allowed</div>
<div class="box working" style="cursor: grab">grab</div>
<div class="box working" style="cursor: grabbing">grabbing</div>
<div class="box working" style="cursor: e-resize">e-resize</div>
<div class="box working" style="cursor: n-resize">n-resize</div>
<div class="box working" style="cursor: ne-resize">ne-resize</div>
<div class="box working" style="cursor: nw-resize">nw-resize</div>
<div class="box working" style="cursor: s-resize">s-resize</div>
<div class="box working" style="cursor: se-resize">se-resize</div>
<div class="box working" style="cursor: sw-resize">sw-resize</div>
<div class="box working" style="cursor: w-resize">w-resize</div>
<div class="box working" style="cursor: ew-resize">ew-resize</div>
<div class="box working" style="cursor: ns-resize">ns-resize</div>
<div class="box working" style="cursor: nesw-resize">nesw-resize</div>
<div class="box working" style="cursor: nwse-resize">nwse-resize</div>
<div class="box working" style="cursor: col-resize">col-resize</div>
<div class="box working" style="cursor: row-resize">row-resize</div>
<div class="box working" style="cursor: all-scroll">all-scroll</div>
<div class="box working" style="cursor: zoom-in">zoom-in</div>
<div class="box working" style="cursor: zoom-out">zoom-out</div>
</div>
<h2>Safari 26.0.1&nbsp;<small>(20622.1.22.118.4)</small></h2>
<div class="flex-box">
<div class="box working" style="cursor: context-menu">context-menu</div>
<div class="box working" style="cursor: help">help</div>
<div class="box working" style="cursor: pointer">pointer</div>
<div class="box not-working" style="cursor: progress">progress</div>
<div class="box not-working" style="cursor: wait">wait</div>
<div class="box working" style="cursor: cell">cell</div>
<div class="box working" style="cursor: crosshair">crosshair</div>
<div class="box working" style="cursor: text">text</div>
<div class="box working" style="cursor: vertical-text">vertical-text</div>
<div class="box working" style="cursor: alias">alias</div>
<div class="box working" style="cursor: copy">copy</div>
<div class="box working" style="cursor: move">move</div>
<div class="box working" style="cursor: no-drop">no-drop</div>
<div class="box working" style="cursor: not-allowed">not-allowed</div>
<div class="box working" style="cursor: grab">grab</div>
<div class="box working" style="cursor: grabbing">grabbing</div>
<div class="box working" style="cursor: e-resize">e-resize</div>
<div class="box working" style="cursor: n-resize">n-resize</div>
<div class="box working" style="cursor: ne-resize">ne-resize</div>
<div class="box working" style="cursor: nw-resize">nw-resize</div>
<div class="box working" style="cursor: s-resize">s-resize</div>
<div class="box working" style="cursor: se-resize">se-resize</div>
<div class="box working" style="cursor: sw-resize">sw-resize</div>
<div class="box working" style="cursor: w-resize">w-resize</div>
<div class="box working" style="cursor: ew-resize">ew-resize</div>
<div class="box working" style="cursor: ns-resize">ns-resize</div>
<div class="box working" style="cursor: nesw-resize">nesw-resize</div>
<div class="box working" style="cursor: nwse-resize">nwse-resize</div>
<div class="box working" style="cursor: col-resize">col-resize</div>
<div class="box working" style="cursor: row-resize">row-resize</div>
<div class="box working" style="cursor: all-scroll">all-scroll</div>
<div class="box working" style="cursor: zoom-in">zoom-in</div>
<div class="box working" style="cursor: zoom-out">zoom-out</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment