Juneikerc.com

Cursor in CSS: Customizing the mouse pointer

Featured post image: Cursor in CSS: Customizing the mouse pointer.

The CSS cursor property controls how the mouse pointer will appear when positioned over the element where this property is set.

Obviously, it's only relevant in browsers/operating systems that have a mouse and pointer. It's primarily used for the user experience (UX) to convey the idea of certain functionality.

Types of CSS cursors

Here is a list of the various available values to change the cursor:

cursor: default

css
/* Displays the browser's default cursor. */
.default {
  cursor: default;
}

cursor: pointer

css
/* Changes the cursor to a hand to indicate that the element is interactive, such as a link or a button. */
.pointer {
  cursor: pointer;
}

cursor: progress

css
/* Changes the cursor to a spinning wheel to indicate that something is loading. */
.progress {
  cursor: progress;
}

cursor: move

css
/* Changes the cursor to a four-pointed arrow to indicate that the element is draggable. */


.move {
  cursor: move;
}

cursor: context-menu

css
/* Changes the cursor to a context menu to indicate that it can be right-clicked to access a menu of options. */


.context-menu {
  cursor: context-menu;
}

cursor: help

css
/* Changes the cursor to a question mark to indicate that help can be obtained about the element. */


.help {
  cursor: help;
}

cursor: wait

css
/* Changes the cursor to an hourglass to indicate that something is loading, and one should wait. */


.wait {
  cursor: wait;
}

cursor: crosshair

css
/* Changes the cursor to a cross to indicate that a specific area can be selected. */


.crosshair {
  cursor: crosshair;
}

cursor: cell

css
/* Changes the cursor to a diagonal arrow to indicate that the size of a table cell can be resized. */


.cell {
  cursor: cell;
}

cursor: text

css
/* Changes the cursor to a text cursor to indicate that text can be entered into the element. */


.text {
  cursor: text;
}

cursor: vertical-text

css
/* Changes the cursor to a vertical text cursor to indicate that text can be entered vertically into the element. */


.vertical-text {
  cursor: vertical-text;
}

cursor: alias

css
/* Changes the cursor to a double diagonal arrow to indicate that the element is an alias or a link to another page. */


.alias {
  cursor: alias;
}

cursor: copy

css
/* Changes the cursor to an arrow with a copy symbol to indicate that the element can be copied. */


.copy {
  cursor: copy;
}

cursor: no-drop

css
/* Changes the cursor to a circle with a diagonal line to indicate that the element cannot be dropped in that location. */


.no-drop {
  cursor: no-drop;
}

cursor: not-allowed

css
/* Changes the cursor to a circle with a diagonal bar to indicate that interaction with the element is not allowed. */


.not-allowed {
  cursor: not-allowed;
}

cursor: zoom-in

css
/* Changes the cursor to a magnifying glass to indicate that zooming in on the element is possible */


.zoom-in {
  cursor: zoom-in;
}

cursor: zoom-out

css
/* Changes the cursor to a magnifying glass with a minus sign to indicate that zooming out from the element is possible. */


.zoom-out {
  cursor: zoom-out;
}

cursor: grab

css
/* Changes the cursor to a hand with a grip to indicate that the element 
can be grabbed and dragged */


.grab {
  cursor: grab;
}

cursor: grabbing

css
/* Changes the cursor to a closed hand to indicate that the element is being grabbed and dragged */


.grabbing {
  cursor: grabbing;
}

Customizing the Cursor with an Image Using CSS

You can add an image to the cursor in formats like .png, .svg, or .cur. Note: SVG is not a recognized format by older browsers; consider using .cur and a default value as a fallback in case the SVG image doesn't load.

css
.custom {
  cursor: url("/images/image.svg"), url("/images/image.cur"), auto;
}

I personally recommend .png images with small dimensions; they are better recognized by browsers and have good resolution.

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me