Opera and Custom Cursor in CSS

Opera and Custom cursor in CSS

There is a workaround for opera using javascript:

http://plugins.jquery.com/project/customcursor

works ok, tested in opera 11, though I'd recommend usual css approach for other browsers, especially older ie, which are not too fast even without js.

CSS Cursors are not working in WebKit browsers

The problem seemed to lay in the fact that I had specified 3 levels of cursors i.e. The Custom one, the Crosshair and the Default cursor. There was no need to have the default one in there anyway as Crosshair is accepted by all browsers. Removing this seemed to make it work.

This seems strange though, does CSS only allow for two levels of cursors? If so then why did Opera and IE accept it, do they just ignore the first one?

Fixed CSS

    .olControlDrawFeatureActive 
    {
        cursor:url(<DOMAIN>/common/images/cursors/draw.png),crosshair;
    }

CSS custom cursor doesn't work in FF/Chrome

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

Changing mouse icon thru javascript

This can be accomplished in CSS.

canvas {
    cursor: url(cursor.cur), url(cursor.gif), auto;
}

IE, Firefox, Safari, and Chrome will use the .cur file. The GIF (or use a PNG) is intended for browsers that don’t support the .cur file (not sure if there are any like this). Opera does not support custom cursors.

The size of the image must be 32x32 pixels or lower. This is a (Windows) OS restriction; not a browser restriction.

Reference - Quirksmode CSS compatibility tables http://www.quirksmode.org/css/cursor.html

Why isn't `cursor:context-menu` supported by safari, chrome, or firefox on windows? But it is by IE9 and Opera?

On the "CSS cursor" page of the Mozilla Developer Network you can see:

A context menu is available under the cursor.
In Gecko/Firefox not implemented on Windows, bug 258960 WONTFIX.

On this page you can read more about the bug, e.g.:

In native Windows applications, the cursor for areas with a shortcut menu
has always been identical to the normal cursor. Using a custom cursor will
achieve little apart from annoying people with a non-default normal cursor.

Custom Cursor: Rule of Thumb

I find that "bad practices" usually have some reason why they are bad practices, and also have an alternative way of accomplishing the same thing but in a faster, more understandable, more efficient, or more elegant manner. An example of this might be the general aversion to goto.

For your particular case, I don't know if having a custom cursor is bad practice, but I can't think of a reason why you shouldn't if that's the behavior you want/need. I don't know of a better way to accomplish this either.

That being said, there are general conventions that are followed such as having the arrow as default, text cursor when hovering over text, hand cursor when hovering over links, etc. These conventions are usually followed for convenience and to avoid confusion (my cursor is a hand, so this must be a link). However, if you don't think this will be a problem for you and if the cursor adds to the user experience, then I would encourage you to use it by all means.

Custom base64 image cursor with Opera - possible?

Opera does not support urls for cursors, see http://www.quirksmode.org/css/cursor.html.

---

Related Topics