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?

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.

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

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

Answer 4

I used my own cursor up until today. Blue version of the standard arrow. PNG file with alpha transparent shadow. I loved it. But now I upgraded to 4K, and the PNG logically won't scale, so it appears tiny. Any solution for this? For now I use the crosshair, 'cos I can't stand that hand cursor.

Had this: cursor: url(img/pointer_blue.png),auto;

Now it's: cursor: crosshair;