CSS is an incredibly versatile technology, that allows you to control the appearance and behavior of web pages with ease. One aspect of this is the ability to specify different mouse cursors for HTML elements, which can help to improve the user experience and provide additional information about the functionality of these elements on a page.
In this article, we'll take a look at how to change the mouse cursor with CSS, including the different types of cursors available and how to use them in your designs.
What Are Mouse Cursors?
Mouse cursors are the visual representation of the mouse pointer on a computer screen. They can take many different forms, from the standard arrow pointer to more specialized shapes and icons that indicate different types of functionality. For example, the hand icon that appears when hovering over a clickable link or button.
Different mouse cursors can help to provide additional information to users about the functionality of some elements on a page. For instance, if you want to indicate that clicking on the element will show the context help, you can define the "help" cursor for this element using the cursor CSS property.
The cursor Property Syntax
Mouse cursors in CSS are specified using the cursor property. This property allows web developers to define the type of cursor that should be displayed when the mouse hovers over an element. The cursor property can be set to a variety of values, including keywords such as "help", "move", and "text", as well as custom URLs that point to images or icons. The syntax is as follows:
cursor: [<url [<x> <y>]?,]* [ auto | default | none |
context-menu | help | pointer | progress | wait |
cell | crosshair | text | vertical-text | alias |
copy | move | no-drop | not-allowed | grab | grabbing |
e-resize | n-resize | ne-resize | nw-resize | s-resize |
se-resize | sw-resize | w-resize | ew-resize | ns-resize |
nesw-resize | nwse-resize | col-resize | row-resize | all-scroll |
zoom-in | zoom-out ]Usage example:
Using the help cursor for the abbr tags:
<style>
abbr {
text-decoration: none;
border-bottom: 2px dotted #757575;
cursor: help;
}
</style>
I like editing a <abbr title="Cascading Style Sheets">CSS</abbr> file without necessarily having to edit an <abbr title="Hypertext Markup Language">HTML</abbr> file.
CSS2 Cursor Styles
There are a number of different types of mouse cursors available in CSS, each with its own unique purpose and appearance. Most of them are listed below. You can preview each cursor and test if your browser supports it by moving the mouse pointer above the example blocks.
Styles, available in the CSS 2.2 Specification:
- auto
-
Initial value. The browser determines the cursor to display based on the current context. (I.e. above the text, it will be the "text" cursor, above the hyperlink, it will be the "pointer", and so on.)
cursor: auto
- crosshair
- A simple crosshair (e.g., short line segments resembling a "+" sign).
cursor: crosshair
- default
- The platform-dependent default cursor. Often rendered as an arrow.
cursor: default
- pointer
- The cursor is a pointer that indicates a link.
cursor: pointer
- move
- Indicates something is to be moved.
cursor: move
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
- Indicate that some edge is to be moved. For example, the
'se-resize' cursor is used when the movement starts from the
south-east corner of the box.
cursor:nw-resize cursor:n-resize cursor:ne-resize cursor:w-resize cursor:e-resize cursor:sw-resize cursor:s-resize cursor:se-resize - text
- Indicates text that may be selected. Often rendered as an I-bar.
cursor: text
- help
- Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
cursor: help
- url
- The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle
the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor that is specified at the end of the list.
cursor: url('https://www.wmtips.com/img/handpnt.cur'),text
Cursor formats, supported by browsers:
- Chrome, Safari: .cur, .png, .gif, .jpg.
- Firefox, Gecko: .cur, .png, .gif, .jpg, .svg.
- Internet Explorer, Edge: .cur, .ani.
You can use cursor.cc to draw the .cur files.
You can also use the data URI to embed the cursor image directly into the page source, as illustrated in this CodePen.
CSS3 Cursor Styles
In 2004, more cursor styles were added to the CSS3 UI candidate recommendation, which became the standard in 2018.
- none
-
No cursor is rendered for the element.
cursor: none
- context-menu
- A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.
cursor: context-menu
- progress
- A progress indicator. The program is performing some processing but is different from "wait" in that the user may still interact with the program.
cursor: progress
- cell
- Indicates that a cell or set of cells may be selected.
cursor: cell
- vertical-text
- Indicates vertical text that may be selected.
cursor: vertical-text
- alias
- Indicates an alias of/shortcut to something is to be created.
cursor: alias
- copy
- Indicates something is to be copied.
cursor: copy
- no-drop
- Indicates that the dragged item cannot be dropped at the current cursor location.
cursor: no-drop
- not-allowed
- Indicates that the requested action will not be carried out.
cursor: not-allowed
- grab
- Indicates that something can be grabbed (dragged to be moved).
cursor: grab
- grabbing
- Indicates that something is being grabbed (dragged to be moved).
cursor: grabbing
- col-resize
- Indicates that the item/column can be resized horizontally.
cursor: col-resize
- row-resize
- Indicates that the item/row can be resized vertically.
cursor: row-resize
- all-scroll
- Indicates that something can be scrolled in any direction.
cursor: all-scroll
- zoom-in
- Indicates that something can be zoomed (magnified) in.
cursor: zoom-in
- zoom-out
- Indicates that something can be zoomed (magnified) out.
cursor: zoom-out
Browser Compatibility
The CSS2 cursor styles are supported by all modern browsers.
The CSS3 styles, except zoom-in and zoom-out, are supported by 100% of desktop and 70% of mobile browsers.
The CSS3 zoom-in and zoom-out cursor styles are supported by 98% of desktop and 70% of mobile browsers.
Conclusion
Changing the mouse cursor with CSS is a simple but powerful way to improve the user experience on your website. By providing visual cues about the functionality of different elements, you can make it easier for visitors to interact with your site and increase engagement.
I hope this article has provided you with a solid understanding of how to specify the mouse cursor with the cursor CSS property and thus enhance your web pages. Thanks for reading, and happy coding!
