2d:null 2e:["$","title",null,{"children":"Better cursors | Jerry Jäppinen | Observable"}] 33:T4aa,

Link	Checkbox + label	Button	Select
Hover over me	Hover over me
	Hover over me

34:T590,function __getForm(disabled) { return Inputs.form([ Inputs.select(["First", "Second", "Third"], { label: "Select", disabled }), Inputs.radio(["First", "Second", "Third"], { label: "Radio buttons", value: "First", disabled }), Inputs.checkbox(["First", "Second", "Third"], { label: "Checkboxes", value: ["First"], disabled }), Inputs.color({ label: "Colour input", disabled }), Inputs.toggle({ label: "Toggle", value: true, disabled }), Inputs.date({ label: "Date input", value: "2024-10-11", disabled }), Inputs.datetime({ label: "Time input", disabled }), Inputs.range([0, 100], { label: "Range input", step: 1, disabled }), Inputs.email({ label: "Email input", value: "foo@bar.com", disabled }), Inputs.url({ label: "URL input", placeholder: "https://...", value: "https://lateralnord.com", disabled }), Inputs.password({ label: "Password input", value: "password123", disabled }), Inputs.text({ label: "Text input", placeholder: "Enter text...", value: "Some text here", disabled }), Inputs.textarea({ label: "Textarea", placeholder: "Enter text...", value: "Some text here", disabled }), Inputs.file({ disabled }), Inputs.button("Button", { disabled }) ]); }35:T63d,css = ({ body: `body { cursor: default; }`, help: `abbr { cursor: help; }`, inputs: `details summary, button:enabled, select:enabled, input[type="submit"]:enabled, input[type="file"]:enabled, input[type="file" i]:enabled::file-selector-button, input[type="radio"]:enabled, input[type="checkbox"]:enabled, input[type="range"]:enabled, input[type="color"]:enabled, input[type="date"]:enabled, input[type="datetime-local"]:enabled, input[type="time"]:enabled, input[type="week"]:enabled, input[type="month"]:enabled, /* Some WebKit-only code */ input:enabled::-webkit-outer-spin-button, input:enabled::-webkit-inner-spin-button, input:enabled::-webkit-datetime-edit, input:enabled::-webkit-calendar-picker-indicator { cursor: pointer; }`, labels: `label:has(+ div > input:enabled), label:has(+ div > textarea:enabled), label:has(+ div > select:enabled), label:has(+ div > div > input:enabled), label:has(input:enabled), label:has(+ input:enabled), label:has(div):has(input:enabled), label:has(select:enabled), label:has(+ select:enabled), label:has(div):has(select:enabled), label:has(textarea:enabled), label:has(+ textarea:enabled), label:has(div):has(textarea:enabled) { cursor: pointer; }`, textInputs: `textarea:enabled, input[type="number"]:enabled, input[type="text"]:enabled, input[type="email"]:enabled, input[type="url"]:enabled, input[type="password"]:enabled { cursor: pointer; } textarea:focus, input[type="number"]:enabled:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus { cursor: text; }` })36:T6e4,37:Ta77,osCursorImages = ({ beachball: await FileAttachment("macos-beachball.svg").url(), busy: await FileAttachment("macos-busy.svg").url(), cell: await FileAttachment("macos-cell.svg").url(), contextualmenu: await FileAttachment("macos-contextualmenu.svg").url(), copy: await FileAttachment("macos-copy.svg").url(), cross: await FileAttachment("macos-cross.svg").url(), default: await FileAttachment("macos-default.svg").url(), handgrabbing: await FileAttachment("macos-handgrabbing.svg").url(), handopen: await FileAttachment("macos-handopen.svg").url(), handpointing: await FileAttachment("macos-handpointing.svg").url(), help: await FileAttachment("macos-help.svg").url(), makealias: await FileAttachment("macos-makealias.svg").url(), move: await FileAttachment("macos-move.svg").url(), notallowed: await FileAttachment("macos-notallowed.svg").url(), poof: await FileAttachment("macos-poof.svg").url(), resizedown: await FileAttachment("macos-resizedown.svg").url(), resizeeast: await FileAttachment("macos-resizeeast.svg").url(), resizeleft: await FileAttachment("macos-resizeleft.svg").url(), resizeleftright: await FileAttachment("macos-resizeleftright.svg").url(), resizenorth: await FileAttachment("macos-resizenorth.svg").url(), resizenortheast: await FileAttachment("macos-resizenortheast.svg").url(), resizenortheastsouthwest: await FileAttachment( "macos-resizenortheastsouthwest.svg" ).url(), resizenorthsouth: await FileAttachment("macos-resizenorthsouth.svg").url(), resizenorthwest: await FileAttachment("macos-resizenorthwest.svg").url(), resizenorthwestsoutheast: await FileAttachment( "macos-resizenorthwestsoutheast.svg" ).url(), resizeright: await FileAttachment("macos-resizeright.svg").url(), resizesouth: await FileAttachment("macos-resizesouth.svg").url(), resizesoutheast: await FileAttachment("macos-resizesoutheast.svg").url(), resizesouthwest: await FileAttachment("macos-resizesouthwest.svg").url(), resizeup: await FileAttachment("macos-resizeup.svg").url(), resizeupdown: await FileAttachment("macos-resizeupdown.svg").url(), resizewest: await FileAttachment("macos-resizewest.svg").url(), resizewesteast: await FileAttachment("macos-resizewesteast.svg").url(), screenshotselection: await FileAttachment( "macos-screenshotselection.svg" ).url(), screenshotwindow: await FileAttachment("macos-screenshotwindow.svg").url(), text: await FileAttachment("macos-text.svg").url(), textvertical: await FileAttachment("macos-textvertical.svg").url(), zoomin: await FileAttachment("macos-zoomin.svg").url(), zoomout: await FileAttachment("macos-zoomout.svg").url() })38:[{"id":"0520d700deb484d5b26539ef8e72c9ca493957441fa4f2cf6c6d0d07e90412072ac814fe2c77b1767a02861cb794429a50dd61f96a00d018564dfdbb8288faae","href":"https://static.observableusercontent.com/files/0520d700deb484d5b26539ef8e72c9ca493957441fa4f2cf6c6d0d07e90412072ac814fe2c77b1767a02861cb794429a50dd61f96a00d018564dfdbb8288faae","name":"image@2.png","type":"image/png","lastModified":1728916637063.562,"size":58684},{"id":"ee86af393409ef05c601fba8ffd8e5db234cde732ea33f496f28570184f3c75e6e0f26ab6bd85ac6de592c317c1c7f6b62f413fcd6f71264f02dc81e1d1ca454","href":"https://static.observableusercontent.com/files/ee86af393409ef05c601fba8ffd8e5db234cde732ea33f496f28570184f3c75e6e0f26ab6bd85ac6de592c317c1c7f6b62f413fcd6f71264f02dc81e1d1ca454","name":"macos-busy.svg","type":"image/svg+xml","lastModified":1728739195812.01,"size":1389},{"id":"0907bd7e5122158c8177f063c60d45a5debd5baf3f3c501c052552fc34a6aa66e3db9edc8d7d9f6716a0fd5ad49e0e6b0439854099719a06d6528536b0d919cd","href":"https://static.observableusercontent.com/files/0907bd7e5122158c8177f063c60d45a5debd5baf3f3c501c052552fc34a6aa66e3db9edc8d7d9f6716a0fd5ad49e0e6b0439854099719a06d6528536b0d919cd","name":"macos-resizenortheast.svg","type":"image/svg+xml","lastModified":1728739196176.095,"size":325},{"id":"916c96e41a5fc722ba048ede643cccb5578dffb79f40a3a2238b943edd6a9900dcbc39797542146cf1fbae3d7989d9cade955f25c027a62e8ba5b17b18deddd8","href":"https://static.observableusercontent.com/files/916c96e41a5fc722ba048ede643cccb5578dffb79f40a3a2238b943edd6a9900dcbc39797542146cf1fbae3d7989d9cade955f25c027a62e8ba5b17b18deddd8","name":"macos-handgrabbing.svg","type":"image/svg+xml","lastModified":1728739196198.448,"size":7748},{"id":"e06c0ef73daa01253b0b86e3458f2e65332acfcb94a0599fd72155f38a0666faf962cf92f99f223bbb149d0fffce02858c7d05e0ba15b949d7369abeb312279c","href":"https://static.observableusercontent.com/files/e06c0ef73daa01253b0b86e3458f2e65332acfcb94a0599fd72155f38a0666faf962cf92f99f223bbb149d0fffce02858c7d05e0ba15b949d7369abeb312279c","name":"macos-cross.svg","type":"image/svg+xml","lastModified":1728739195812.652,"size":294},{"id":"235497f9d3d38a08f3aa40fcff2bde4ac0f722d9c101072ac9b191af3b2be9f2a0cb0846a609ce14974a8c0246c59e86998b84c914f4548517c799c7ff7f10fb","href":"https://static.observableusercontent.com/files/235497f9d3d38a08f3aa40fcff2bde4ac0f722d9c101072ac9b191af3b2be9f2a0cb0846a609ce14974a8c0246c59e86998b84c914f4548517c799c7ff7f10fb","name":"macos-contextualmenu.svg","type":"image/svg+xml","lastModified":1728739195813.203,"size":552},{"id":"f0a8a6a105ead24bf47a43bc4645ad601e62320a01f72da66d9fff0e315e7135f6cddba3ff5272371c5bf8e74c631b08cf4fea1ca88b610e56fadedbb3a0b297","href":"https://static.observableusercontent.com/files/f0a8a6a105ead24bf47a43bc4645ad601e62320a01f72da66d9fff0e315e7135f6cddba3ff5272371c5bf8e74c631b08cf4fea1ca88b610e56fadedbb3a0b297","name":"macos-resizewesteast.svg","type":"image/svg+xml","lastModified":1728739196205.283,"size":511},{"id":"f31c00b6f9931a8c3728aede54b0c28b6cbb9a70d30be595d9551c436cb892a7938c65792e408bb988b34a7f22705a794a94e9bc6184cb59a08b2a3b4e6a1d20","href":"https://static.observableusercontent.com/files/f31c00b6f9931a8c3728aede54b0c28b6cbb9a70d30be595d9551c436cb892a7938c65792e408bb988b34a7f22705a794a94e9bc6184cb59a08b2a3b4e6a1d20","name":"macos-cell.svg","type":"image/svg+xml","lastModified":1728739195814.468,"size":365},{"id":"f58005be05729a025ba4009744ef752bae4259b6980c28bf77b444bc8b1b1f147c679289cd1e80a39ddf066553311e9b1a9f421700d3bd0c7c8a00f7ea82c982","href":"https://static.observableusercontent.com/files/f58005be05729a025ba4009744ef752bae4259b6980c28bf77b444bc8b1b1f147c679289cd1e80a39ddf066553311e9b1a9f421700d3bd0c7c8a00f7ea82c982","name":"macos-copy.svg","type":"image/svg+xml","lastModified":1728739195854.59,"size":784},{"id":"7f4e00ff65be1fadadd43e022b691be50731d0ac547e7d2ca3af67f11457cd1cc617dbf36aa55c3ffe8cf94786b8b1c4384d09e8eadd2a0490df91cdd42dac7e","href":"https://static.observableusercontent.com/files/7f4e00ff65be1fadadd43e022b691be50731d0ac547e7d2ca3af67f11457cd1cc617dbf36aa55c3ffe8cf94786b8b1c4384d09e8eadd2a0490df91cdd42dac7e","name":"macos-default.svg","type":"image/svg+xml","lastModified":1728739195988.381,"size":363},{"id":"6443a29b6a40c8803b69db1c25b4f7692105b3c976bb304ab2a54e1238b595109f0de2be787ae224db5d8457a281c863fec212d7e6bc53e40a4e87d85ac034bc","href":"https://static.observableusercontent.com/files/6443a29b6a40c8803b69db1c25b4f7692105b3c976bb304ab2a54e1238b595109f0de2be787ae224db5d8457a281c863fec212d7e6bc53e40a4e87d85ac034bc","name":"macos-handpointing.svg","type":"image/svg+xml","lastModified":1728739195854.884,"size":9105},{"id":"3c1beccb9059fcfed040eb5e4ff061a8726b3b6292ec75d2cd8fceb42ef332b9b683037dfb9579e0340ced937f7e5b19241c895e0080a77d5c023d80515eef68","href":"https://static.observableusercontent.com/files/3c1beccb9059fcfed040eb5e4ff061a8726b3b6292ec75d2cd8fceb42ef332b9b683037dfb9579e0340ced937f7e5b19241c895e0080a77d5c023d80515eef68","name":"macos-move.svg","type":"image/svg+xml","lastModified":1728739195983.073,"size":746},{"id":"4d93843d8c41972550aeb76d5edddb1a1e91dac0b539a3a7d7a89fb37327413fbc9fa690e22941cb786a2049383302edebeafa1234fbd4e4fa515743e8bea031","href":"https://static.observableusercontent.com/files/4d93843d8c41972550aeb76d5edddb1a1e91dac0b539a3a7d7a89fb37327413fbc9fa690e22941cb786a2049383302edebeafa1234fbd4e4fa515743e8bea031","name":"macos-poof.svg","type":"image/svg+xml","lastModified":1728739196175.235,"size":938},{"id":"f81b04973cd7273ab30aef5e6482a60ad18eeb66d24e470ce558df5581afa7bb76cdd2b7f9ea71e4086079325f5a8c51faa0bbb78349b14709fbd9c19bf4ab9c","href":"https://static.observableusercontent.com/files/f81b04973cd7273ab30aef5e6482a60ad18eeb66d24e470ce558df5581afa7bb76cdd2b7f9ea71e4086079325f5a8c51faa0bbb78349b14709fbd9c19bf4ab9c","name":"macos-notallowed.svg","type":"image/svg+xml","lastModified":1728739196199.465,"size":818},{"id":"2d64db9fb212853af7aa335adadab9ea763428d9be1d95ba683045b956a95ecf501f55b6db92acad55e67476f2552b0f7c82ee6493bdea92ef83e5a49bdf53d7","href":"https://static.observableusercontent.com/files/2d64db9fb212853af7aa335adadab9ea763428d9be1d95ba683045b956a95ecf501f55b6db92acad55e67476f2552b0f7c82ee6493bdea92ef83e5a49bdf53d7","name":"macos-resizeleftright.svg","type":"image/svg+xml","lastModified":1728739196201.757,"size":464},{"id":"6111a844b0ec3cea649e5fb30e61a9dce0168580db5d998d837bfd8053df4394b7bbd558434370d7d2ace64a62982b854609cea3a22126c3a4f2cc50d7e76053","href":"https://static.observableusercontent.com/files/6111a844b0ec3cea649e5fb30e61a9dce0168580db5d998d837bfd8053df4394b7bbd558434370d7d2ace64a62982b854609cea3a22126c3a4f2cc50d7e76053","name":"macos-makealias.svg","type":"image/svg+xml","lastModified":1728739196205.609,"size":1194},{"id":"8f54dcd86335c11539f5b9f9007eed99cf6cb15ee1f0a367787837f2ac718778a8be88a3970dd8d4706925d409d40b6a6e541dd5f3492991070198c7503972e2","href":"https://static.observableusercontent.com/files/8f54dcd86335c11539f5b9f9007eed99cf6cb15ee1f0a367787837f2ac718778a8be88a3970dd8d4706925d409d40b6a6e541dd5f3492991070198c7503972e2","name":"macos-handopen.svg","type":"image/svg+xml","lastModified":1728739196185.859,"size":3397},{"id":"7c41c69ffcab32b9b4aeb0e40dad06369cbeb939847df3e592d4f9391a5946900ffbfade75a569a2c2472a4e1953809464ee2894233130be18ffe1902bdde1b2","href":"https://static.observableusercontent.com/files/7c41c69ffcab32b9b4aeb0e40dad06369cbeb939847df3e592d4f9391a5946900ffbfade75a569a2c2472a4e1953809464ee2894233130be18ffe1902bdde1b2","name":"macos-resizenorth.svg","type":"image/svg+xml","lastModified":1728739196225.546,"size":257},{"id":"71fee776d6638e0a9192490f8ab09b0475bd6690f04ee1ec453c2cd8a7db003dce96cb87e6ad3e4d72a63b771e0cc308e678d5b745c02de68ab5d9c149df9327","href":"https://static.observableusercontent.com/files/71fee776d6638e0a9192490f8ab09b0475bd6690f04ee1ec453c2cd8a7db003dce96cb87e6ad3e4d72a63b771e0cc308e678d5b745c02de68ab5d9c149df9327","name":"macos-resizeright.svg","type":"image/svg+xml","lastModified":1728739196209.207,"size":339},{"id":"8326e0553751d61663e59cc7986f1fb3c9a9d37213ef0923661baa48af9dabf67559838a3fcaf680039d41c30157873e7e39002c0e37511801d66a14c0f8afba","href":"https://static.observableusercontent.com/files/8326e0553751d61663e59cc7986f1fb3c9a9d37213ef0923661baa48af9dabf67559838a3fcaf680039d41c30157873e7e39002c0e37511801d66a14c0f8afba","name":"macos-resizeleft.svg","type":"image/svg+xml","lastModified":1728739196200.909,"size":322},{"id":"128c9a56caf6cf703bc4c75ae482d4a82e803ae5c8a9bb146c962ab25ef1c67761ff8a3c6bf086f8a7246b66fc4d508ed00a74a91a556cb40d4f185db1e6b33d","href":"https://static.observableusercontent.com/files/128c9a56caf6cf703bc4c75ae482d4a82e803ae5c8a9bb146c962ab25ef1c67761ff8a3c6bf086f8a7246b66fc4d508ed00a74a91a556cb40d4f185db1e6b33d","name":"macos-resizenorthsouth.svg","type":"image/svg+xml","lastModified":1728739196189.225,"size":421},{"id":"76d32fc9b68848988e49e7fcc955425adf63feb135cab55a75fb594353722c29a6135ac1a1673e81d8f7b176f5865000d219a381083dba960d7498c242dd327f","href":"https://static.observableusercontent.com/files/76d32fc9b68848988e49e7fcc955425adf63feb135cab55a75fb594353722c29a6135ac1a1673e81d8f7b176f5865000d219a381083dba960d7498c242dd327f","name":"macos-help.svg","type":"image/svg+xml","lastModified":1728739196228.892,"size":1382},{"id":"67af27be7f048f67901280fd56a04cda5eb2fb74c42f2882e1930684de358afcc5acd18420ba651a74d218dcab5710e97142dd175a5b2fea4ec84b2ebf830675","href":"https://static.observableusercontent.com/files/67af27be7f048f67901280fd56a04cda5eb2fb74c42f2882e1930684de358afcc5acd18420ba651a74d218dcab5710e97142dd175a5b2fea4ec84b2ebf830675","name":"macos-beachball.svg","type":"image/svg+xml","lastModified":1728739196182.669,"size":3315},{"id":"cb2c4e5d4a2cbfec9d67270197e21dbea82e6382a3b608d1b6e4d77b421ebd9dc48159a21a0e35e5ca4258fc57303919f3b7edeccfee4dcdb4d9b1f7a749e45c","href":"https://static.observableusercontent.com/files/cb2c4e5d4a2cbfec9d67270197e21dbea82e6382a3b608d1b6e4d77b421ebd9dc48159a21a0e35e5ca4258fc57303919f3b7edeccfee4dcdb4d9b1f7a749e45c","name":"macos-resizenorthwestsoutheast.svg","type":"image/svg+xml","lastModified":1728739196362.893,"size":443},{"id":"08a6f8d8ac4ddb0cec477f7c10a7226ee051c59e82498ed12a83b465088d8dd09d3995e6b107f90eec994a1e8edae23c487b8ebb6612b59bdb95632a367e8844","href":"https://static.observableusercontent.com/files/08a6f8d8ac4ddb0cec477f7c10a7226ee051c59e82498ed12a83b465088d8dd09d3995e6b107f90eec994a1e8edae23c487b8ebb6612b59bdb95632a367e8844","name":"macos-resizenortheastsouthwest.svg","type":"image/svg+xml","lastModified":1728739196438.098,"size":444},{"id":"93514f2e892a8c2a11f20e9d05de7dfdf0e87e17225d65b5076ced01ba1d23d8c7fcafeb586772f53f5834ff45d9fa473b3e297441f0a0fff0985b2890fc1895","href":"https://static.observableusercontent.com/files/93514f2e892a8c2a11f20e9d05de7dfdf0e87e17225d65b5076ced01ba1d23d8c7fcafeb586772f53f5834ff45d9fa473b3e297441f0a0fff0985b2890fc1895","name":"macos-zoomin.svg","type":"image/svg+xml","lastModified":1728739196457.113,"size":654},{"id":"64599c8dd6226453b9d87ca9efd7e7bf2811195c1a5e6eca922588b7bdc046dcd059060f0b340ac3544dcbdc8a6aa1ac53c5471644ecd17d421df58b77412845","href":"https://static.observableusercontent.com/files/64599c8dd6226453b9d87ca9efd7e7bf2811195c1a5e6eca922588b7bdc046dcd059060f0b340ac3544dcbdc8a6aa1ac53c5471644ecd17d421df58b77412845","name":"macos-resizesouthwest.svg","type":"image/svg+xml","lastModified":1728739196458.129,"size":345},{"id":"3cf92eeb634f7db08de63d9912deff45ce93cdadf5166c97f507a6bab1060f2826c16075e04a06c74d77c039785e3c70881f95f62fa22425cb962448523ba058","href":"https://static.observableusercontent.com/files/3cf92eeb634f7db08de63d9912deff45ce93cdadf5166c97f507a6bab1060f2826c16075e04a06c74d77c039785e3c70881f95f62fa22425cb962448523ba058","name":"macos-resizeupdown.svg","type":"image/svg+xml","lastModified":1728739196463.237,"size":475},{"id":"c536fe8fcb0683956f058bc634a884a74fab7a70da1f406746e99ef8db51f26b7b4355088284a4fd800e1d110246186773dc5585b297b3a4c2e8075e169b5f25","href":"https://static.observableusercontent.com/files/c536fe8fcb0683956f058bc634a884a74fab7a70da1f406746e99ef8db51f26b7b4355088284a4fd800e1d110246186773dc5585b297b3a4c2e8075e169b5f25","name":"macos-text.svg","type":"image/svg+xml","lastModified":1728739196469.987,"size":1962},{"id":"8dc1d610ccc7641daea6293a1b128f2a9d78b3f2e247595c318e14c2105bfa45e90d3e91e2a0a3fe4e0b99c96a9ec34c4b19da1cb98f3eadef0010a78fefd019","href":"https://static.observableusercontent.com/files/8dc1d610ccc7641daea6293a1b128f2a9d78b3f2e247595c318e14c2105bfa45e90d3e91e2a0a3fe4e0b99c96a9ec34c4b19da1cb98f3eadef0010a78fefd019","name":"macos-screenshotselection.svg","type":"image/svg+xml","lastModified":1728739196471.741,"size":662},{"id":"794536a601b62464ae18671c85ba4fab2dbf25ca5b9c23d668da962aa5351bd6dd1fd3b75ec3ce9b3d3401e7c5d7a001a2321d014c2091b5fdf662d3be430e41","href":"https://static.observableusercontent.com/files/794536a601b62464ae18671c85ba4fab2dbf25ca5b9c23d668da962aa5351bd6dd1fd3b75ec3ce9b3d3401e7c5d7a001a2321d014c2091b5fdf662d3be430e41","name":"macos-resizedown.svg","type":"image/svg+xml","lastModified":1728739196481.224,"size":337},{"id":"427762cffee3cdaff2a14c6174a78d865643011e72564107a05fecdc8cae3b7c8786bd8b2e55a601a3bf624321c0114921ee7b081e8ad029ff8046fb3f54325d","href":"https://static.observableusercontent.com/files/427762cffee3cdaff2a14c6174a78d865643011e72564107a05fecdc8cae3b7c8786bd8b2e55a601a3bf624321c0114921ee7b081e8ad029ff8046fb3f54325d","name":"macos-resizeup.svg","type":"image/svg+xml","lastModified":1728739196479.601,"size":340},{"id":"165b208202ce03f12cfaf38b7cf7ea48ddee6f4f7c89cd5fb74f26d3cbaeeccdcc0bc689468cb1060b6a1f716d5066067c1198199808cc97f103e7d2eaf841cc","href":"https://static.observableusercontent.com/files/165b208202ce03f12cfaf38b7cf7ea48ddee6f4f7c89cd5fb74f26d3cbaeeccdcc0bc689468cb1060b6a1f716d5066067c1198199808cc97f103e7d2eaf841cc","name":"macos-zoomout.svg","type":"image/svg+xml","lastModified":1728739196492.915,"size":625},{"id":"767c406e012130ae8aa2fb10e21b05989393bab38ee47e599cad4cb16de17fb0ca3666ba52418ba0d066a2e9f6d92bf4598a2896109e9532287ece4bc1c74eac","href":"https://static.observableusercontent.com/files/767c406e012130ae8aa2fb10e21b05989393bab38ee47e599cad4cb16de17fb0ca3666ba52418ba0d066a2e9f6d92bf4598a2896109e9532287ece4bc1c74eac","name":"macos-textvertical.svg","type":"image/svg+xml","lastModified":1728739196495.818,"size":1965},{"id":"0239fe0edf1a36ec7b19ef01236a0fddc18cf9a355726fe41d2305999e05ecbb708b041c7dd378094ad97c54bfa169174432ec6df72c235018dc484937dad3d8","href":"https://static.observableusercontent.com/files/0239fe0edf1a36ec7b19ef01236a0fddc18cf9a355726fe41d2305999e05ecbb708b041c7dd378094ad97c54bfa169174432ec6df72c235018dc484937dad3d8","name":"macos-resizeeast.svg","type":"image/svg+xml","lastModified":1728739196507.866,"size":256},{"id":"2c6ef519abd680dbf16cc9625941e24ab228771201e94057aec6638222f3be35971e550d3e0724475c12e79337825fd7aed53525a572a5cff7a447409a4680cf","href":"https://static.observableusercontent.com/files/2c6ef519abd680dbf16cc9625941e24ab228771201e94057aec6638222f3be35971e550d3e0724475c12e79337825fd7aed53525a572a5cff7a447409a4680cf","name":"macos-resizewest.svg","type":"image/svg+xml","lastModified":1728739196481.951,"size":289},{"id":"4b6d4ccd53ffe5e24fb2574b5cdef561ad517b7cc9bb387ea62ec5a429529f50ee4b4ed8188da8651a15ec4acef828bd3f205a8b3fe1e05f66d3ed42f2c87666","href":"https://static.observableusercontent.com/files/4b6d4ccd53ffe5e24fb2574b5cdef561ad517b7cc9bb387ea62ec5a429529f50ee4b4ed8188da8651a15ec4acef828bd3f205a8b3fe1e05f66d3ed42f2c87666","name":"macos-resizesouth.svg","type":"image/svg+xml","lastModified":1728739196518.583,"size":292},{"id":"5f485912a1b5019c047975f392b145a36ee991ea5da7807a66b59380364cc127b3f19d56c6183df184019564115e70b8121982210c0c1fb5af95eb7bdc2f44d9","href":"https://static.observableusercontent.com/files/5f485912a1b5019c047975f392b145a36ee991ea5da7807a66b59380364cc127b3f19d56c6183df184019564115e70b8121982210c0c1fb5af95eb7bdc2f44d9","name":"image@3.png","type":"image/png","lastModified":1728934469290.682,"size":30036},{"id":"fbee583edb2b1e78d20eb5a15c0e4b86e92624045b63cdd051fcab544776b84cf2882c5c38a761f17fd477b133d6e1ddf09d8a788ee222547254c21760f88cce","href":"https://static.observableusercontent.com/files/fbee583edb2b1e78d20eb5a15c0e4b86e92624045b63cdd051fcab544776b84cf2882c5c38a761f17fd477b133d6e1ddf09d8a788ee222547254c21760f88cce","name":"macos-resizesoutheast.svg","type":"image/svg+xml","lastModified":1728739196496.457,"size":328},{"id":"d2e0d3a4767894d62e21977e11948f61ce898f1bc001400027a9eb73dc8e489b8a9ed843159530a81633a5773cbdc5a5b4149a0615e2e9cfb2fc47ad18541c06","href":"https://static.observableusercontent.com/files/d2e0d3a4767894d62e21977e11948f61ce898f1bc001400027a9eb73dc8e489b8a9ed843159530a81633a5773cbdc5a5b4149a0615e2e9cfb2fc47ad18541c06","name":"macos-screenshotwindow.svg","type":"image/svg+xml","lastModified":1728739196581.796,"size":793},{"id":"a0807d956aa89507c23964f6eb67a9516aeaba2602efed5456d78d27a1e9dba5b0154e8de9d969c284c3b5a211233eab5b89b0ac35d99908e19b0788d56776a3","href":"https://static.observableusercontent.com/files/a0807d956aa89507c23964f6eb67a9516aeaba2602efed5456d78d27a1e9dba5b0154e8de9d969c284c3b5a211233eab5b89b0ac35d99908e19b0788d56776a3","name":"macos-resizenorthwest.svg","type":"image/svg+xml","lastModified":1728739196656.065,"size":330}] 31:{"id":"cd394fea32bd1b33","slug":"better-cursors","title":"Better cursors","thumbnail":"2011c2f77ecdcdc919404b438717648615b430ab0ab2399bc44c8ea0dd516d81","access_level":"public","create_time":"$D2024-10-11T07:56:51.475Z","update_time":"$D2026-04-17T14:49:24.174Z","view_time":null,"first_public_time":"$D2024-10-12T11:46:44.840Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"78ae8536857bb3ab","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":"starter_2024"},"version":3254,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e1c1d34cf3c138c","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":null}],"members":[{"type":"individual","id":"5e1c1d34cf3c138c","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":null,"role":"editor"},{"type":"team","id":"78ae8536857bb3ab","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Better cursors","cells":[{"id":3028,"value":"

Better cursors

@jerryjappinen/better-cursors

\n $\"Better$ \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3241,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"**How do cursors work on HTML pages? Poorly.**\n\nRelying on default cursors is a missed opportunity. This article explores cursor behaviour in interactive web apps, and showcases an improved default stylesheet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2658,"value":"

Usage on Observable

\n\n

\n ${md`\nThe subtle CSS tweaks described in this article enhance the usability of Observable notebooks. You can easily import them from this UI library:\n\n\\`\\`\\`js\nimport { baseStyles } from \"@jerryjappinen/ui\"\n\\`\\`\\`\n\nThese styles include improved default cursors, more consistent styling for disabled inputs and a couple other minor tweaks. They don’t alter the look and feel of Observable at all. Read more\n`}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2713,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":746,"value":"toc({\n // closed: true,\n // title: \"In this article\",\n // title: false,\n select: \"h2,h3\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2648,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2649,"value":"## HTML cursor behaviour","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"While each operating system has its own look and feel for cursors, they are overall fairly standardised on the web. These are the ones we’ll talk about in this article:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2192,"value":"\n${[\n \"default\",\n \"help\",\n \"text\",\n \"pointer\",\n \"not-allowed\"\n].map(k => ``).join(\"\")}\n

${c(k)}

MDN Docs ${icon(\"external\")}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2905,"value":"We won’t discuss the actual cursor graphics, but how browsers apply them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2203,"value":"

Open large preview

Various cursors on macOS presented by mac-cursors.netlify.app.