assign color to mouse cursor using CSS

Question

How can I assign color to the mouse cursor in a web-page?

Can anyone suggest me a way to do it using any of the technologies e.g. HTML, CSS, JavaScript?

score 18 · Answer 1 · 2016-05-15T16:05:06.533

18

Just to add the possibility to dynamically adding a cursor without providing an image but generating it on client with JavaScript and Canvas.

Demo contains a simple cursor drawn with shapes, but this could just as easily have been images, video and so forth (everything a canvas support).

Fiddle (updated 5/2016 for Firefox - moved from document to element).

Note: FireFox has problem when the cursor is changed so frequent as in this demo - updated to change only once per second. FF clears the cursor when setting a new image but since the new image needs to be decoded it shows the default in the mean time. Chrome waits until the image is decoded before switching over.

In any case it is merely to show it can be done using canvas - test demo using Chrome and don't change mouse so often :-).

The animation loop which here changes color randomly to demonstrate:

function loop() {

    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);

    setTimeout(loop, 1000);
}

The cursor maker:

function makeCursor(color) {

    // create off-screen canvas
    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 16;
    cursor.height = 16;

    // draw some shape for sake of demo
    ctx.strokeStyle = color;

    ctx.lineWidth = 2;
    ctx.moveTo(2, 10);
    ctx.lineTo(2, 2);
    ctx.lineTo(10, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();

    // set image as cursor (modern browsers can take PNGs as cursor).
    element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}

edited May 15 '16 at 16:05

answered Sep 13 '13 at 06:47

+1 for your efforts :) and for a disco cursor.. lol, btw default cursor showsup while you are moving the cursor, am on ff 22 – Mr. Alien Sep 13 '13 at 06:48
@Mr.Alien thanks. yeah, FF is a little unstable probably due to animation loop being so tight. But for normal use I guess this won't be a problem unless the color change all the time as here (updating the css rule) – Sep 13 '13 at 06:50
1

now that goes pretty well, can't +1 twice ;) but +1 again.. it fixes the default cursor issue too... though support for canvas isn't impressive as of now, but this will be worth to use ahead... – Mr. Alien Sep 13 '13 at 06:54
@Mr.Alien canvas support is actually pretty good (I work mostly with canvas nowadays) (http://caniuse.com/#feat=canvas). But IE is the um..special case, for older versions anyways. – Sep 13 '13 at 06:56
We can say it's a border line case, cuz all the recent versions of browsers have started supporting canvas, and who cares about IE, it's like a poop on the cake – Mr. Alien Sep 13 '13 at 06:59
Hey ken, I've got a mail bro, saying that this doesn't work when hovered on links, so can you fix this for the links as well? – Mr. Alien Jan 11 '14 at 06:03
how do I apply that script to my html document? I'm very novice, I was trying with
some text
but doesn't works that way for me :( – Roberto Sepúlveda Bravo Oct 14 '16 at 23:26
1

Note that the fiddle link is broken. – Jaideep Shekhar Mar 08 '20 at 15:51

Mr. Alien · Accepted Answer · 2013-09-13T06:17:28.947

17

Use an image along with CSS cursor property, I don't see any need of JavaScript heere...

Demo

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

As commented, I've used auto which is nothing but default cursor just incase your image fails to load, exactly like we declare multiple font families.

edited Sep 13 '13 at 06:17

answered Sep 13 '13 at 06:11

Mr. Alien

153,751
34
298
278

what is the "auto" for ? – MarsOne Sep 13 '13 at 06:15
2

@NathanLee I never build things for IE as it sucks always for everything, though polyfills are available :) – Mr. Alien Sep 13 '13 at 06:16
I agree. But it should work for IE8 atleast. Anyways, nice info :) - @Mr.Alien – Nitesh Sep 13 '13 at 06:19
1

@Harry you can't change the *system* cursor but you *can* change colors of a custom cursor dynamically by providing an image for it using canvas. – Sep 13 '13 at 06:20
thanks @Ken-AbdiasSoftware wasn't aware of that. maybe I should do more analysis :) – Harry Sep 13 '13 at 06:21
1

@Mr.Alien: Thanks for the alternative approach. At least I have got a solution. – Rajesh Paul Sep 13 '13 at 07:24

maikelsabido · Answer 3 · 2013-09-13T06:54:10.703

1

You should create/look for a customized cursor. Then, use the cursor CSS property to include it on your website.

There's a tutorial for this here: http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

edited Sep 13 '13 at 06:54

answered Sep 13 '13 at 06:14

maikelsabido

1,253
4
18
37

assign color to mouse cursor using CSS

3 Answers3

Linked

Related