CSS - Cursor

Ethan D. -

Cursor Property Syntax

The CSS cursor property lets you set the type of cursor displayed when the mouse pointer is over an element. The cursor property syntax is:

Example: Cursor Property Syntax

selector {
  cursor: value;
}

selector is the CSS selector that targets the element(s) you want to apply the cursor style to, and value is one of the possible values for the cursor property.

The cursor property accepts many values, which can be grouped into these categories:

Category Description
General cursors Standard cursor styles for different purposes
Links and status cursors Cursors for links and elements with specific states
Selection cursors Cursors for selecting text or elements
Drag and drop cursors Cursors for dragging and dropping elements
Resizing and scrolling cursors Cursors for resizing elements or indicating scrollable areas
Zooming cursors Cursors for zooming in or out

Each category has predefined cursor values that show the state or purpose of the hovered element. For example, the pointer value is often used for links and buttons to show that they are clickable.

You can also use custom images as cursors, which we will cover later in this tutorial.

If you don't set a cursor value for an element, it will inherit the cursor style from its parent. The default cursor property value is auto, which means the browser will set the right cursor style based on the element's context. For most elements, this will be the standard arrow cursor.

Next, we'll look at the different categories of cursor values in more detail, with examples of when and how to use each one.

Cursor Property Values

The CSS cursor property offers many values that let you set the cursor style for different situations. Here's a look at each category of cursor values:

General Cursors

General cursors are the most basic cursor styles and are good for many purposes.

Value Description
auto The default cursor style, usually an arrow. The browser sets the cursor based on the element's context.
default An arrow cursor, often used to reset the cursor style to its default state.
none No cursor is shown. This is useful when you want to hide the cursor, like when hovering over a video player.

Selection Cursors

Selection cursors are used when selecting text or elements on the page.

Value Description
cell A cell selection cursor, useful when selecting table cells or spreadsheet cells.
crosshair A crosshair cursor, often used for precise selections like in image editing software.
text A text selection cursor, usually an I-beam. It shows that text can be selected.
vertical-text A vertical text selection cursor, used when selecting vertically-oriented text.

Drag and Drop Cursors

Drag and drop cursors provide visual feedback during drag and drop operations.

Value Description
alias An alias cursor, usually an arrow with a small alias icon. It shows that an alias or shortcut will be created when an item is dropped.
copy A copy cursor, usually an arrow with a small plus sign. It shows that the dragged item will be copied when dropped.
move A move cursor, usually an arrow. It shows that the dragged item will be moved when dropped.
no-drop A no-drop cursor, usually a slashed circle. It shows that dropping is not allowed at the current location.
not-allowed A not-allowed cursor, usually a slashed circle. It shows that an action is not allowed.
grab A grab cursor, usually a hand in an open-grip position. It shows that an element can be grabbed for dragging.
grabbing A grabbing cursor, usually a hand in a closed-grip position. It shows that an element is being grabbed or dragged.

Resizing and Scrolling Cursors

Resizing and scrolling cursors are used when elements can be resized or when content is scrollable.

Value Description
all-scroll An all-scroll cursor, usually arrows pointing up, down, left, and right. It shows that content can be scrolled in any direction.
col-resize A column resize cursor, usually a vertical double-headed arrow. It shows that the width of a column can be adjusted.
row-resize A row resize cursor, usually a horizontal double-headed arrow. It shows that the height of a row can be adjusted.
n-resize, e-resize, s-resize, w-resize Resize cursors for the north, east, south, and west edges of an element. They are usually double-headed arrows pointing in the matching direction.
ne-resize, nw-resize, se-resize, sw-resize Resize cursors for the northeast, northwest, southeast, and southwest corners of an element. They are usually diagonal double-headed arrows pointing in the matching directions.

Zooming Cursors

Zooming cursors provide visual feedback when zooming in or out of content.

Value Description
zoom-in A zoom-in cursor, usually a magnifying glass with a plus sign. It shows that clicking will zoom in on the content.
zoom-out A zoom-out cursor, usually a magnifying glass with a minus sign. It shows that clicking will zoom out of the content.

These cursor values cover a wide range of use cases and help provide clear visual cues to users about the interactivity and state of elements on a webpage. By using the right cursor style, you can improve the user experience and make your website easier to navigate.

Using Custom Cursors

CSS lets you use custom images as cursors. This can help when you want to use branded or themed cursors that match your website's design.

To use a custom image as a cursor, use the url() function as the value for the cursor property:

Example: Setting Custom Cursor

selector {
  cursor: url(path/to/image.png), auto;
}

Replace path/to/image.png with the path to your image file. The second value after the comma is a fallback cursor that will be used if the custom image can't be loaded.

When using custom cursor images, keep these points in mind:

Point Description
Image formats Most browsers support PNG, GIF, and SVG formats for cursor images. For the best compatibility, use PNG or GIF images.
Image size Keep your cursor images small, ideally 32x32 pixels or less. Large images may be resized by the browser, which can result in a pixelated or distorted look.
Transparency Use images with transparency when possible to create cursors that blend well with different backgrounds. PNG and GIF images support transparency.
Hotspot By default, the cursor's hotspot (the point that interacts with elements) is positioned at the top-left corner of the image. You can set a custom hotspot using the x y coordinates after the image URL:

Example: Setting Custom Hotspot

selector {
  cursor: url(path/to/image.png) x y, auto;
}

Replace x and y with the desired coordinates in pixels. For example, 10 5 would set the hotspot 10 pixels from the left and 5 pixels from the top of the image.

Example: Applying Custom Cursor to Elements

.custom-cursor {
  cursor: url('path/to/custom-cursor.png') 4 4, pointer;
}
<a href="#" class="custom-cursor">Link with custom cursor</a>

The custom cursor image is applied to elements with the custom-cursor class. The hotspot is set to 4 pixels from the left and 4 pixels from the top of the image. If the custom image fails to load, the browser will fall back to the pointer cursor.

When using custom cursor images, it's important to consider performance and accessibility:

  • Use optimized images to keep file sizes small and minimize the impact on page load times.
  • Provide appropriate fallback cursors for cases where the custom image can't be loaded or when the user has disabled custom cursors in their browser settings.
  • Be mindful of users with vision impairments or those who rely on screen readers. Custom cursors should not interfere with the accessibility of your website.