CODEWITHSUNDEEP
htmlcss
Gajus
Gajus

Reputation: 73808

CSS custom cursor doesn't work in FF/Chrome

I am trying to create a custom cursor using the following image:

http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png

The image size must be retained. I've tried simply to use body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }, though that doesn't work in FF/Chrome. (not even checking other browsers)

What's the reason for it not working?

Upvotes: 33

Views: 81930

Answers (5)

Sir Tow Mater
Sir Tow Mater

Reputation: 21

Images that are larger than the maximum supported size will generally just be ignored. On Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels.

Upvotes: 2

Samuel Getachew
Samuel Getachew

Reputation: 13

The reason your custom cursor isn't working in Firefox and Chrome is likely due to the cross-origin policy of the browser. Browsers have security restrictions when it comes to using external resources as custom cursors to prevent potential misuse and protect user privacy.

When you use the cursor CSS property with a URL, the browser treats it as an external resource and may block it from being used as a cursor if it doesn't comply with the same-origin policy. Essentially, the cursor image must be hosted on the same domain as the web page for it to work in modern browsers.

In your case, the image URL you provided (http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png) seems to be hosted on a different domain (anuary.com) than your web page. As a result, the browser is blocking the use of the image as a custom cursor.

To make it work, you have two options:

  1. Host the image on the same domain: Upload the hand-cursor.png image to your own server and update the URL in your CSS accordingly. This way, the image will be served from the same origin as your web page, and the cross-origin policy won't be violated.

  2. Base64 encode the image: Convert the image to a data URL using Base64 encoding and use that data URL directly in your CSS. This method embeds the image data into the CSS, making it work regardless of the origin. Here's how you can do it:

    • Use an online tool to convert the image to a Base64 data URL.
    • Update your CSS to use the Base64 data URL:
    body {
  cursor: url('data:image/png;base64,PUT_YOUR_BASE64_ENCODED_IMAGE_HERE');
}

    Replace PUT_YOUR_BASE64_ENCODED_IMAGE_HERE with the actual Base64 encoded image data.

Keep in mind that using Base64 encoded images in CSS may increase the CSS file size, so be cautious when using this approach for large images. Also, note that some older versions of Internet Explorer may not support this method, but it should work fine in modern versions of major browsers like Firefox and Chrome.

Upvotes: 0

Octavium - The HTML Helper
Octavium - The HTML Helper

Reputation: 41

The reason this is not working is maybe that you're doing this: cursor:url(https://example.com/example.png) You have to add , auto after the statement. Therefore, this is what you are looking for. cursor:url(https://example.com/example.png),auto; Here's the clippet.

button {cursor:url("data:image/x-icon;base64,AAACAAEAICAAAAAAAACoCAAAFgAAACgAAAAgAAAAQAAAAAEACAAAAAAAAAQAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAP8IAP8RAAAA/+YABP8AAAD/iAAAav8AAP+3AACi/wALCxIAAHP/APL/AAAA6v8AALv/AACV/wDQ/wAAAP8RAAD/9wAAe/8AACb/AABV/wAAAP8A/8gAAP/3AAAA+/8AAP8aAF7/AAAA/1EA/wCzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAFQAAAA4AAAAAAAAVABgAAAAAAAAAAAAAAAAAAAAAAAAGEQAADAAJAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABEEAAAZAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAsACQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAcCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMAAAkAAAAJCQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAACQAACQAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAKAAAACQkcAgsZDA4VABUAAAAAAAAAAAAAAAAAAAAAAA0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBRsBGg8WAAAEEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBEGFQAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxAXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////////////////////////////////////////////////8/////H////w////cPH//zDg//8Q5P//AOD//wDx//8A////AP///wH///8DgH//AwA//wAAH/4AAB/+AAf//AAD//wAAf/4AAD/+Af///Af///wf///8f////"),auto;}
<button>Hover over me!</button>
Is this what you looked for?

Upvotes: 3

xec
xec

Reputation: 18024

The problem is not just with your css code lacking second argument but with the image file.

If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.

You might also want "pointer" rather than auto, judging by the look of the image;

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;

EDIT: i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info

Upvotes: 53

detaylor
detaylor

Reputation: 7280

Firefox requires a second non-url argument such as

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto;

There is a great reference at Quirksmode CSS2 - Cursor Styles

Upvotes: 23

Related Questions