When you navigate a web page, your browser typically shows a different cursor depending on what you're hovering over: a regular arrow for empty spaces, a hand for clickable items, and a text cursor for text areas. With CSS, you can change these defaults to a variety of other cursor styles.
h1 {
cursor: move;
}
p {
cursor: text;
}The table below shows various cursors supported by most browsers. Hover over the "TEST" link in the output column to see each cursor in action.
Appearance |
Values | Example | Output |
|---|---|---|---|
 |
default |
a:hover{cursor:default;} |
TEST |
Check out more cursor styles »
You can also make your own custom cursors.
The cursor property allows you to specify a list of custom cursors along with a fallback generic cursor. If a custom cursor isn't supported or can't be found, the browser will use the next cursor in the list until it finds a usable one.
Tip: Convert images to the standard .cur format for custom cursors. Various online tools can help you convert formats like .jpg and .gif to .cur.
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}In this example, "custom.gif" and "custom.cur" are the custom cursor files, uploaded to your server space, with "default" serving as the fallback cursor if the custom one isn't available or supported.
Warning: Always include a generic cursor at the end of the list when defining a custom cursor, or it may not render correctly.
Here's a live demo of a custom cursor.
Note: Earlier versions of Internet Explorer support only the .cur format for static cursors and .ani for animated ones. Modern browsers like Firefox, Chrome, and Safari support formats like .cur, .png, .gif, and .jpg.