DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
The cursor
property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it’s only relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the idea of certain functionality. So try not to break that affordance.
There are a bunch of them:
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
The cursor can also be an image:
.custom {
/* The second value here is a fallback. */
cursor: url(images/my-cursor.png), auto;
/* You may need coordinates to adjust the pointer
for example, the custom cursor is circular and you want
the middle to be where you click */
cursor: url(target.svg) 15 15, move;
}
Some WebKit only cursors:
-webkit-zoom-in
-webkit-zoom-out
-webkit-zoom-grab
-webkit-zoom-grabbing
More information
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
5 | 4 | 9 | 14 | 5 |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
130 | No | 130 | No |
And for newer values, like zoom-in
and zoom-out
:
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4* | 2* | No | 12 | 3.1* |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
130 | No | 130 | No |
col-resize not work in chrome, it just disappearred when i was hovering the place which had style like’cursor:col-resize’
I see the good cursor on hover, in Chrome.
Minor nit here: according to the Moz docs linked above, ‘not-allowed’ is supported for IE6 and above. I only know because I came here in search of a bug fix for this cursor type not appearing in IE when dynamically added via jQuery.
+1
Thanks so much Trav. I was going mad that the cursor wasn’t changing. Turns out I had the same issue as you with jQuery.
Thank you for this cool way of presenting cursors, now I have a place to come look for the correct cursor if I forget. Always wanted this.
Cheers!
Small note about the webkit only cursors
Don’t exist, the “zoom” part needs to be taken out for these and should be:
I find these to be handy when building webkit only web applications :)
Adam, how do you change the cursors for the dom elements? I understand the -webkit-grab, but not the -grabbing one. Maybe I have to handle the “ondrag” event if I’m using jQuery UI draggable? Or change the classes in the “start” and “end” events? Thanks!
no he means there is no
cursor:-webkit-zoom-grab
as it says above. it should be-webkit-grab
Anyone know of a way to make the cursor be actual text? I’ve achieved this using jQuery and a div that tracks the position of the cursor – the only issue is that then the cursor can’t click/hover anything, since the div is blocking everything below it. Any ideas?
Thanks!
@joss; you ROCK!
I have made a codepen where I use data:uri to add inline custom cursors: http://codepen.io/netsi1964/full/DsAhE
Thanks! What a handy little reference, saved me some frustration!
One of the best cursor tuts I have ever seen :-Cheers to Chris
Could you give me an example for IE using zoom-in, and zoom-out, since they do work and i haven’t seen any examples here using these:
demo ?
If I use CSS for changing the cursor image if it goes over a div, it works with a smiley but not with a self-made image with the same image-properties as the smiley (also a gif with reduced colors)… I don’t see the difference… why does the smiley from the web works but not my image?
@Ann I have made a codepen where I have played around with custom cursors. Please note that it is not supportet in general. Custom cursors using data-uri
Does anyone know what’s the difference between
wait
andprogress
? On Safari they look the same. Is it pure semantics?On Windows:
“progress” = cursor + rotating circle = (you can use the page, but it is busy)
“wait” = rotating circle only = (you cannot use the page)
I created a custom cursor image with the code provided but on front end the cursor has a very thin black outline…is there any way I can remove it?
I also tried to add my custom image cursor with the line of css shown above. Nothing shows up. Are there -webkit-moz-o requirements?
Thanks.
Hey guys,
Has anyone experienced an enlarged custom cursor? Like it zooms in ridiculously?
Any help would be great!
Thanks!
Thanks!
Thank you :)
i wanted to use the cursor an image.. i write down the url but it didt work. than i saw ur article and i got ma prob solved.. thnx man
Cursor: not-allowed works on IE5 on Mac.
Default cursor works at mozilla 30. Thanks ! Its wonderful …
It should be noted that it doesn’t work on pseudo elements .
Yes, This very useful tut.
Does anyone know the difference between auto and default? Thank you.
The default forces the cursor to the arrow that you see in most ordinary use.
Auto is what occurs with normal use. It allows the OS (or whoever) to control the cursor’s appearance and will change based on context as it normally does.
They’ve just missed / forgotten to add the css to the default demo above, so it’s behaving as auto.
Small issue: the default div doesn’t have the “cursor: default” style applied so when you hover the text, the cursor changes to text cursor type. When cursor: default is applied on an element, it should always be the default arrow cursor.
Here’s a jsfiddle if you want to see each in demo:
http://jsfiddle.net/ewhb866y/1/
very useful tutorial.. thanks..
Any way to lazy load the cursor image?
Any way we can lazy load the cursor image?
Well, you missed one cursor name “grab”.
$("tbody tr").css("cursor", "grab");
don’t work cursor:grab in chrome.
Use cursor:-webkit-drag
Thanks for the info! Does this still apply to OSX Yosemite? I can’t seem to get the cursor: pointer; (hand) to work any more.
Thanks is advance.
Hi , I implemented custom cursor like:
This is working fine when I am accessing my page with http as soon as I access my page with https it is not working . It shows default cursor only. I am redirecting my page from http to https. I hav IE10 and windows. I tried to give absolute url also but no luck. Can anyone please help me .
Would be cool/interesting if the cursor could be set by css. For example, by setting content “Read more” + what font, background & color etc.
:)
Thanks, it helped.
Really this is so effective to know more about cursor in CSS.
can you help me i went the hand pointer..
Hi Yahya
Take a look at this Custom cursors using data-uri it shows how to create custom cursors.
you cas use (cursor:pointer;) in css class
Hi. I’m a Class 9 student and I’ve been trying to customize my cursor with an image in html, but it refuses to work. Can someone help please?
Can you post your code ?
In my web page, all the cursor types change to default after some time. Anyone knows why is that ?
Mr Anthony do you have any advice on what I can do to make the icon render.. I’m still just developing the website.
Any help would be appreciated, Thanks
I would suggest you use relative paths as apposed to absolute paths,
so if you place your HTML document in the same folder as your .ico file.
Try:
body {
cursor: url(‘Antivirus.ico’), default;
}
Unfortunately this seems not to work in any of my browsers; I use Windows 8.1, and use Google Chrome, Firefox and the default IExplorer as some of the possible browser I use. I’ve tried all and none managed to render the icon.
IF I lost it somewhere, feel free to give a shout and advice me. Please and thank you.
/Syntax/
body {
cursor: url(“C:\Users\User\Documents\Notepadd\Antivirus.ico”), default; /We’ve set our custom cursor and also the default fall-back cursor/
}
i would like to change cursor to a text on img hover any one know the trick?
Yeah! The
cursor
property accepts a URL parameter where you can specify an image. The “custom” example in this post shows the syntax:.custom {
cursor: url(images/my-cursor.png), auto;
}
Here’s another post with some examples: https://css-tricks.com/using-css-cursors/
How can I get my cursor as big as this site, it is so much fun!!
http://www.louiswalch.com/
Thanks, this was very useful! I’ve used this CSS to display a speaker icon as a mouse cursor when hovering the hero video at https://winway.se:
cursor: url("https://winway.se/wp-content/uploads/2020/09/sound_test-1-e1599744120404.png"), auto;
It works perfect in Chrome but Safari only displays the default pointer. Any advice on what’s wrong? When I test the PNG cursor examples on css-tricks.com, they work fine in Safari.
If you want to change the offset of a cursor image, you can add coordinates like this:
(Values are specified in pixels using
cursor: [ [<x> <y>]?,]
syntax.)