Smart Custom Cursors

Custom cursors that actually work as you expect. They are a lot more accurate to the browser.

Try it out on this page! Hover over the text and links. It functions just as you expect it to.

Why use it

  • It shows the text cursor when you hover over text.
  • Already includes the CSS necessary to make your custom cursors work. You don't need to specify that a link should show the hand, or deal with all of the browser weirdness involved.
    • The CSS is extracted from Firefox for accuracy!
  • Uses CSS variables. They're pretty easy to work with.
  • They're very similar to the syntax in CSS.

Setup

Smart Custom Cursor comes in two files, a JavaScript file, and a CSS file.

Download both of them:

Download JavaScript
Download CSS

And upload both of those files onto your website.

Then add them inside of your webpage's head, like so:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="custom-cursor.css">
    <script src="custom-cursor.js" async></script>
  </head>
  <body>
  </body>
</html>

Adding custom cursors

Use this funky CSS on the body to change the cursors for the entire page:

body {
  --set-cursor-default: url(your-cursors/default.png);
  --set-cursor-text: url(your-cursors/text.png) 9 21;
  --set-cursor-pointer: url(your-cursors/pointer.png) 15 3;
}

It takes the custom cursor the same way CSS does, just without the additional thing at the end saying what cursor it is. For instance, this typical way to do a custom cursor...

body {
  cursor: url(your-cursors/default.png), default;
}

...becomes this:

body {
  --set-cursor-default: url(your-cursors/default.png);
}

Smart Custom Cursor supports any cursor type HTML supports. Mozilla has a big list of them here. Just continue the pattern...

body {
  --set-cursor-default: url(your-cursors/default.png);
  --set-cursor-text: url(your-cursors/text.png) 9 21;
  --set-cursor-pointer: url(your-cursors/pointer.png) 15 3;
  --set-cursor-nw-resize: url(your-cursors/nw-resize.png) 8 8;
  --set-cursor-busy: url(your-cursors/nw-resize.png) 15 3;
}

A little advanced, but you don't have to just put them on the body! Since it's just good ol' CSS variables, you can change up the cursors for each element.

.pink-section {
  --set-cursor-default: url(some-fancy-pink-cursors/default.png);
  --set-cursor-text: url(some-fancy-pink-cursors/text.png) 9 21;
  --set-cursor-pointer: url(some-fancy-pink-cursors/pointer.png) 15 3;
}

How to use cursor: with this

So you have an element that changes the cursor.

<div class="hand">I make a hand appear!</div>

<style>
  .hand {
    cursor: pointer;
  }
</style>

If you do it like that, then you wont get your custom cursor.

Instead, set cursor like this:

<div class="hand">I make a hand appear!</div>

<style>
  .hand {
    cursor: var(--cur-pointer);
  }
</style>

The deal with the script

It's used to detect if the cursor is hovering over text.

If it doesn't load for whatever reason, then you won't get that. Your custom cursors will still appear though!

Known limitations

These are seemingly not possible to do with CSS?

  • The resize handle on a text box doesn't use the custom cursor.
  • Scrollbars don't use the custom cursor.