Introducing the New CSS Cursor Styles in CSS3

The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications.

In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…

CSS2 Cursor Styles

CSS2 offered relatively few options (hover over any element to see how the cursor changes):

cursor: auto

cursor: inherit

cursor: crosshair

cursor: default

cursor: help

cursor: move

cursor: pointer

cursor: progress

cursor: text

cursor: wait

cursor: e-resize

cursor: ne-resize

cursor: nw-resize

cursor: n-resize

cursor: se-resize

cursor: sw-resize

cursor: s-resize

cursor: w-resize

CSS3 Cursor Styles

We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:

cursor: none (not IE, Safari, Opera)

cursor: context-menu (not Firefox, Chrome)

cursor: cell (not Safari)

cursor: vertical-text

cursor: alias (not Safari)

cursor: copy (not Safari)

cursor: no-drop

cursor: not-allowed

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

cursor: col-resize

cursor: row-resize

cursor: all-scroll

Browser-Specific Cursors

Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:

cursor: -webkit-grab; cursor: -moz-grab;

cursor: -webkit-grabbing; cursor: -moz-grabbing;

cursor: -webkit-zoom-in; cursor: -moz-zoom-in;

cursor: -webkit-zoom-out; cursor: -moz-zoom-out;

Creating Your Own Cursor

Finally, you can create your own cursor graphic, e.g.

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;

Note:

Internet Explorer requires a Windows cursor file (.cur).
Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
Firefox also requires a second non-URL cursor fallback value.
It’s not supported in Opera.
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.

Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles… And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World. Comments on this article are closed. Have a question about CSS3? Why not ask it on our forums?

Frequently Asked Questions on CSS3 Cursor Styles

How can I customize my cursor using CSS3?

CSS3 provides a property called ‘cursor’ that allows you to customize the cursor’s appearance. You can use predefined cursor values like ‘pointer’, ‘crosshair’, ‘text’, etc., or you can use a custom image by providing the URL of the image. Here’s an example of how to use a custom image as a cursor:

body {
cursor: url('custom-cursor.png'), auto;
}
In this example, ‘custom-cursor.png’ is the custom cursor image, and ‘auto’ is the fallback cursor style if the image is not available.

What are the different types of cursor styles available in CSS3?

CSS3 provides a variety of cursor styles to enhance user interaction. Some of the commonly used cursor styles include ‘auto’, ‘default’, ‘none’, ‘context-menu’, ‘help’, ‘pointer’, ‘progress’, ‘wait’, ‘cell’, ‘crosshair’, ‘text’, ‘vertical-text’, ‘alias’, ‘copy’, ‘move’, ‘no-drop’, ‘not-allowed’, ‘grab’, ‘grabbing’, ‘all-scroll’, ‘col-resize’, ‘row-resize’, ‘n-resize’, ‘e-resize’, ‘s-resize’, ‘w-resize’, ‘ne-resize’, ‘nw-resize’, ‘se-resize’, ‘sw-resize’, ‘ew-resize’, ‘ns-resize’, ‘nesw-resize’, ‘nwse-resize’, ‘zoom-in’, and ‘zoom-out’.

How can I change the cursor style on hover using CSS3?

You can change the cursor style on hover by using the ‘:hover’ pseudo-class in CSS3. Here’s an example:

button:hover {
cursor: pointer;
}
In this example, the cursor will change to a pointer when you hover over a button.

Can I use a GIF as a custom cursor in CSS3?

Yes, you can use a GIF as a custom cursor in CSS3. However, it’s important to note that not all browsers support animated cursors. Here’s how you can do it:

body {
cursor: url('animated-cursor.gif'), auto;
}
In this example, ‘animated-cursor.gif’ is the animated GIF used as a cursor.

Why is my custom cursor not working in CSS3?

There could be several reasons why your custom cursor is not working in CSS3. The image file might not be found at the specified URL, the image file might not be supported by the browser, or the CSS syntax might be incorrect. Make sure the URL is correct, the image file is in a supported format (like .png or .cur), and the CSS syntax is correct.

How can I change the cursor style for a specific element using CSS3?

You can change the cursor style for a specific element by selecting that element in your CSS. Here’s an example:

#myElement {
cursor: crosshair;
}
In this example, the cursor will change to a crosshair when you hover over the element with the id ‘myElement’.

Can I use a custom cursor in CSS3 for all browsers?

While CSS3 allows you to use custom cursors, it’s important to note that not all browsers support all cursor styles or custom cursors. Always provide a fallback cursor style for browsers that do not support your custom cursor.

How can I use a custom cursor for a specific area on my webpage?

You can use a custom cursor for a specific area on your webpage by applying the cursor style to that specific area. Here’s an example:

#myArea {
cursor: url('custom-cursor.png'), auto;
}
In this example, the custom cursor will be used when you hover over the area with the id ‘myArea’.

What is the maximum size for a custom cursor in CSS3?

The maximum size for a custom cursor in CSS3 is 128×128 pixels. If your custom cursor image is larger than this, it will be scaled down by the browser.

Can I use different cursor styles for different states of an element?

Yes, you can use different cursor styles for different states of an element using pseudo-classes like ‘:hover’, ‘:active’, and ‘:focus’. Here’s an example:

button {
cursor: pointer;
}
button:active {
cursor: progress;
}
In this example, the cursor will be a pointer when you hover over a button, and it will change to a progress cursor when you click the button.