When you override this intentional modification with a custom CSS cursor, you’re denying someone something they need for a core OS operating mechanism. This browser does not support the video element.

These modifications allow a user to be able to perceive, and therefore use a cursor to interact with the OS and the apps it runs. This can include increasing its size, as well as swapping it out for a more high contrast version (why high contrast isn’t the default is a separate post unto itself). One of the many modifications a person can make to their OS is changing the cursor.

It’s one of those things that you probably don’t really notice until you start actively looking, unless you’re affected by it. Nowadays I’ve been seeing them being applied to trendy luxury ecommerce sites with increasing frequency. In the past, I’d see custom cursors applied to tumblr and Myspace themes, Geocities sites, and niche software. In my experience, custom cursors are declared on the html or body element, meaning the entire website or web app gets the custom cursor applied to it. I’m unsure if the ability to load a custom cursor is a 90s throwback, or an example of the web platform attempting to futureproof itself. Hover your cursor in this area to see a custom CSS cursor example. The browser will then load the cursor image and apply it in place of your OS cursor any place the cursor is declared. What a custom cursor isĪ custom cursor is when you use CSS’ URL function to load a custom cursor image. The web being able to borrow these OS-level affordances is huge, in that it helps people understand how a piece of web UI can be used, even though it may not look like its OS equivalent. These user-facing state changes are a regular part of using your Operating System ( OS), and provide a vital clue for how a piece of OS interface, or an app running in the OS can be interacted with. This includes a pointing hand icon for links, resize and text entry indicators, zooming, dragging affordances, etc.Ī four by two grid of CSS cursors, including OS default, text edit bar, link pointer, move, open drag hand, zoom in, column resize, and cell. What a custom cursor isn’tįirst off, I’m not talking about the ability to change a mouse cursor's state.

This is to say that adding a custom cursor might seem like a fun, fancy thing to do at first, but has some serious inclusive design considerations to be aware of. One of the worst things about CSS is that it lets us make websites and web apps look like anything we can dream up. One of the best things about CSS is that it lets us make websites and web apps look like anything we can dream up. This might seem like a niche complaint, and you know what? It is. I believe that letting CSS load a custom cursor was a mistake.

Cursor changer app