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?

Tolley

Answer 1

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.

Erastes

what is the "auto" for ? – Sawfish

@NathanLee I never build things for IE as it sucks always for everything, though polyfills are available :) – Erastes

I agree. But it should work for IE8 atleast. Anyways, nice info :) - @Mr.Alien – Stocking

@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. – Yousuf

thanks @Ken-AbdiasSoftware wasn't aware of that. maybe I should do more analysis :) – Salto

@Mr.Alien: Thanks for the alternative approach. At least I have got a solution. – Tolley

Answer 2

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';
}

Yousuf

+1 for your efforts :) and for a disco cursor.. lol, btw default cursor showsup while you are moving the cursor, am on ff 22 – Erastes

@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) – Yousuf

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... – Erastes

@Mr.Alien canvas support is actually pretty good (I work mostly with canvas nowadays) (caniuse.com/#feat=canvas). But IE is the um..special case, for older versions anyways. – Yousuf

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 – Erastes

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? – Erastes

how do I apply that script to my html document? I'm very novice, I was trying with <div onmouseover="loop()">some text</div> but doesn't works that way for me :( – Organotherapy

Note that the fiddle link is broken. – Storz

Answer 3

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

Adorl