CSS Custom Cursors

By  on  

Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for your site.  Now we probably laugh at that in hindsight but there may be times when you'd like to customize a cursor, and CSS lets you do it quite easily!

The CSS

The cursor CSS property accepts a series of cursors, and using a url() value allows you to set a custom CSS cursor:

body {
	cursor: url('some-cursor.ico'), default;
}

It's always best to have a backup native cursor like default, much as you set broader font-family's when styling text.  Also note that Firefox scales the cursor down to a smaller size whereas Chrome currently allows a larger original size.

Now don't go doing this willy nilly, use a custom cursor in places where you think important, like a magnifying glass + or - over zoomable images and such.

Raygun Pulse

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

Incredible Demos

  • By
    Introducing LazyLoad 2.0

    While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code.  With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading -- the images were loading regardless of...

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

Discussion

  1. Jaime Blázquez

    How do you specify what is the clicking point? Must be part of the file format or it can be defined in the CSS for other image formats (as PNG or GIF)?

  2. Anthony Hastings

    It’s probably worth noting that the keyword fallback is mandatory, and, your also able to use .png files as icons.

  3. I’ve used these about a year ago for math teaching tools. Take note that the hit point is always set to the top left point however you can change that when creating the ICO file

  4. The cursor disappears when you right click. Any workaround?

  5. Albert

    @Filip It doesn’t for me – Firefox Nightly

  6. I didn’t know that this is standard, that we can use .ico files as cursors. How neat :) Thanks for sharing.

  7. How about browser support? Does it work in IE9+ and other browsers? Thanks.

  8. Karsten Buckstegge

    The demo does not work for me in IE 9-11.

    • Lemon

      Try an actual browser.

  9. Mdabuko M

    Unfortunately this seems not to work in any of my browsers; I use Windows 8.1, and use Google Chrome, Firefox and the default IExplorer as some of the possible browser I use. I’ve tried all and none managed to render the icon.
    IF I lost it somewhere, feel free to give a shout and advice me. Please and thank you.

    /*Syntax*/
    body {
    cursor: url("C:\Users\User\Documents\Notepadd\Antivirus.ico"), default; /*We've set our custom cursor and also the default fall-back cursor*/
    }
    
    • It’s probably the fact that your icon is using a filesystem path rather than a path which the webserver is serving.

    • Mdabuko M

      Mr Anthony do you have any advice on what I can do to make the icon render.. I’m still just developing the website.
      Any help would be appreciated, Thanks.

    • CrouchingBruin

      @Mdabuko, just upload your icon file to a folder on your site, then point to it in your URL, like:

      http://example.com/images/Anvivirus.ico
    • ThaneAcheron

      I would suggest you use relative paths as apposed to absolute paths,
      so if you place your HTML document in the same folder as your .ico file.
      Try:

       body { 
       cursor: url('Antivirus.ico'), default; 
       }
      

      or if your .ico file is in a folder within your html document directory.

       body { 
       cursor: ur('Resources/Antivirus.ico'), default; 
       }
      

      I hope this help.

  10. Nice one.can we use other extensions for image or ico only?

  11. Tazze

    since .ico is a container for both .png and .bmp files, would these formats work?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!