Use CSS to Change the Mouse Cursor

Changing the mouse cursor is a pretty simple task. If you were online in the nineties or early noughties, you probably became very familiar with sparkly, blinking, custom cursors on every other website you visit. Maybe you even downloaded some of those custom cursors ‑ and the spyware, adware, and malware that came with them. I personally was very pleased with the animated, trailing clock I managed to implement into a site I maintained at the time.

However, aside from being a bad memory from my misguided youth on the web, there are actually useful ‑ and surprisingly common ‑ use cases for changing the mouse cursor on the modern web. It's also easy enough, with some handy and widely‑supported CSS rules to take care of it.

The Sensible Choice.

It is not uncommon to replace form elements; dropdowns don't have particularly attractive or branded styling by default, so replacing them with a JS‑powered collection of divs (or a ul > li type setup) is a fairly common job.

When you replace the dropdown, though, the cursor won't react to your new "fake" dropdown in the same way it might a default select. For the sake of the UX in this case, it makes absolute sense to use CSS to change the mouse cursor and to let the user know through visual cues that they can interact with this element.

For example, you could use something like this simple snippet:

.dropdown {  cursor: pointer;}

Fairly straightforward, right? The pointer value is one of a set of default values available through CSS, the full collection being:

autodefaultnonecontext-menuhelppointerprogresswaitcellcrosshairtextvertical-textaliascopymoveno-dropnot-allowedall-scrollcol-resizerow-resizen-resizee-resizes-resizew-resizens-resizeew-resizene-resizenw-resizese-resizesw-resizenesw-resizenwse-resize

These will render similarly across browsers and on different systems using operating system defaults. For instance, in Chrome on Mac, not‑allowed & no‑drop are the same, amongst some of the others.

This set of cursor options will probably cover basically any user experience situation that you find yourself in. Honestly, you probably won't even be using the vast majority of them at any point in your career (I can't recall a time I've ever used all‑scroll, for instance).

It is important to remember, though, when you're making the decision to change the cursor, that you are affecting a crucial piece of the UX. You need to make sure that you are choosing the right cursor for the job and make sure that you have a good reason to change it; otherwise, your users could be left confused and a bit lost.

You might also want to disable the text cursor for text that serves more of an aesthetic purpose than an informative one ‑ for instance, giant header text that fills up the masthead of your site.

The (Possibly) Less‑Sensible Choice.

Outside of use cases that actually benefit the user and portray meaningful information, there's also the opportunity to actually just swap the cursor out for aesthetic or other reasons. You can still absolutely use CSS to turn your cursor into something more pleasing to the eye for your visitors or a tacky UX nightmare.

The cursor property can also accept image URLs as a value, meaning you could use a .png or .svgs (amongst other formats), to customise the cursor to your heart's content. There are limitations on some formats, and they may not always show up. For instance, SVG can be difficult to get to show up on Chrome on a Mac.

I have personally used this approach on a few occasions: the testimonials carousel I include in my website footer uses stylised SVG arrows to show where you can cycle forwards or backwards ‑ essential given that I've also chosen to hide the buttons altogether. Another example is the IMG Licensing website I put together last year. Their new branding featured contemporary plus symbols, so it made sense to include that ‑ sparingly ‑ into the new site.

You can also use the cursor: none; value from defaults above to hide the cursor altogether, and then use JavaScript to implement a custom solution, positioning an element at the mouse coordinates. Although not something I would recommend, it does allow total freedom on what your cursor looks like or does. There are use cases where the effect is very striking, too; for instance, if you have a very slick and modern website, you may feel that the cursor is a key component in moving your application away from more stuffy conventional cursor styles. The Pantheone Audio website implements an interest tap‑type cursor ‑ you can see that cursor: none; has been declared on body in order to hide the default.

If you're committed to using a custom cursor, there are definitely right ways to do it. As long as you make sure that users can still differentiate between something they can click and something they cannot, then the technology is there to allow you to.