Search code examples
csscursor

CSS .cur cursor format


I set custom cursor url(mouse2.cur) and it doesnt change.

(mouse2.png) works perfectly! Whats the problem ?

body{
    cursor: url(mouse2.cur),pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

Solution

  • Different browsers have different support in url of the cursors.

    Firefox/Mac, Safari/Mac, Chrome/Mac don't support PNG and JPG cursors (tested with 48px cursors). IE only supports cursors in the CUR format.

    According to CanIUse: http://caniuse.com/#search=cursor

    W3C CSS3 Specification states:

    The UA must support the following image file formats:

    • PNG, as defined in [PNG]
    • SVG, as defined in [SVG], in secure static mode [SVG-INTEGRATION]
    • any other non-animated image file format that they support for in other properties, such as the the background-image property

    By the way, W3C CSS3 Specification says that .cur cursors should be supported by most browsers.

    Note: At the time of writing this specification (spring 2015), the only file formats supported for cursors in common desktop browsers are the .ico and .cur file formats, as designed by Microsoft. For compatibility with legacy content, UAs are encouraged to support these, even though the lack of an open specification makes it impossible to have a normative requirement about these formats. Some information on these formats can be found on Wikipedia.

    http://www.w3.org/TR/css3-ui/#cursor

    Finally, your .cur file may be broken or even link to it returns 404 error. Please check the link to your .cur file.