CSS Cursors

Using the correct type of cursors is becoming more important than ever with the increase in web applications. The cursor property controls the styling of the mouse cursor. Obviously this property is only for operating systems that use a mouse e.g. it wouldn’t apply a phone or a tablet because there is no mouse. From a UX perspective it is essential to utilise this property as it conveys meaning.

As well as the standard cursors there is custom cursors which we will look at it too.

All of the cursors

Example

See the Pen CSS – Cursors by Michael Gearon (@michaelgearon) on CodePen.0

The CSS

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

Browser-Specific Cursors

Additionally there is a few browser specific cursors which are:

-webkit-zoom-in
-webkit-zoom-out
-webkit-zoom-grab
-webkit-zoom-grabbing

Custom Cursors

As well as the standard cursors mentioned above we can also use a custom cursor using a url() value.

.customcursor {
   cursor: url(images/cursor.png), auto;
}

However it does require more effort to use the custom cursor and there is some requirements in order for it be used successfully in most browsers which are:

  1. Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
  2. Firefox also requires a second non-URL cursor fallback value.
  3. It’s not supported in Opera.
  4. x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.
  5. Internet Explorer requires a Windows cursor file (.cur).

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.