Controlling cursors with CSS and creating .cur files

Posted on April 21, 2007 by Estelle Weyl



Creatings Cursors, a.k.a. .cur files

You can convert images such as .jpgs or .gifs into cursors. A static cursor is saved as a .cur file. An animated cursor is saved as a .ani file.

To create a .cur or .ani file, you need specialized imagery software that is freely available. Available software includes the free Just Cursors that is a bitmap style editor and Icon Forge which costs money, but has much greater capabilities.

Here are the steps:

  • Download and install the imagery software of your choice, listed above.
  • Convert your image to a .cur file if you want a static cursor. For animated cursors, convert your animated .gif file into a .ani file.
  • Upload your image to your server.
  • Write a CSS class to target the cursor (see below for instructions)

Including cursors with CSS

To include image cursors, you need to have the .cur file loaded onto a server on the Internet so that you can point to it:

<style type="text/css">
li { cursor:url(http://www.yourdomain.com/images/yourimage.cur); }
</style>

If you want to simply control the browser default cursor with CSS you don’t use the image path, but rather, the cursor name:

li { cursor: text; }
a {cursor: pointer;}

Controlling cursors with JavaScript

You can dynamically change your cursor using javascript:

object.style.cursor="text"

List of Browser Cursors

Hover over any of the definitions below to see how the cursor renders in your browser:

Value   Appearance and default browser defined usage
url(image.cur) heart cursor Image cursor you defined (if browser supports it)
default default cursor The default cursor: default value for disabled form elements and media="print" styles.
auto auto cursor The browser’s default cursor: input[type="hidden"]
crosshair crosshair cursor Like a big plus sign
pointer pointer cursor hand pointer: input[type="image"]
move move cursor cross with four arrows: Image Resizing
e-resize East Resize cursor left-right arrows: Image Resizing
ne-resize northeast resize cursor arrows pointing northeast & southwest: Image Resizing
nw-resize northwest resize cursor arrows pointing northwest: Image Resizing
n-resize north resize cursor arrows pointing up & down (points northeast in IE): Image Resizing
se-resize southeast resize cursor arrows pointing northwest & southeast (points northeast in IE): Image Resizing
sw-resize southwest resize cursor arrows pointing northeast & southwest:Image Resizing
s-resize south resize cursor arrows pointing up & down (points northeast in IE): Image Resizing
w-resize west resize cursor left-right arrows: Image Resizing
text text cursor Line up and down, indicating text: input, textarea, a:visited, a:hover
wait wait cursor Watch or hourglass
help help cursor Question mark or balloon: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.
progress difference in browsers, but shows waiting: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.

Note:

  • I recommend against using image cursors, especially animated .gif cursors, since they are annoying.
  • You can even convert a Flash movie into a cursor: first export the movie as an animated gif, then export your .gif to an .ani file.
  • If you are declaring an image cursor, remember to always define a generic cursor at the end of the list in case none of the url-defined cursors can be used. A list of cursors should be specified, followed by a standard cursor designation. Then, if the user’s browser cannot handle the image cursor, it will use the the other specified cursor. If that doesn’t work, it will use the default cursor defined by the browser.
    {cursor: url("firstcursor.cur"), url("secondcursor.cur"), pointer;}
  • Safari, IE and Firefox support cursors of type .CUR and .ANI. URL-specified cursors are not yet supported by Netscape and the alternate cursor does not load, so you’ll get the default.
  • .cur is for a regular cursor, .ani is for an animated cursor.
  • To see the cursors on your desktop on windows navigate to C:\WINDOWS\Cursors


This entry was posted in CSS (including hacks), Cursors & Icons, Web Development. Bookmark the permalink.

8 Responses to Controlling cursors with CSS and creating .cur files

  1. Website Design says:
    October 3, 2007 at 5:20 pm

    Excellent. Many developers don’t know about this but I find it to be a great trick. Any little thing you can do to give the user a more personal experience pays off.

  2. trademark registration says:
    November 15, 2007 at 1:09 am

    I agree with Website Design: this is not a well-known trick, and it’s really very useful. Thanks for posting it.

  3. oliver says:
    July 15, 2008 at 3:40 pm

    hahaha… thanks a lot… this is simple but big blast to us knowing that it works in other browser like firefox ang safari…

  4. BSM says:
    August 19, 2008 at 10:34 am

    Hi, I have been messing around with the cursors since yesterday. I made custom cursors for the body and a tags. I can see the default cursor which is a .PNG image in Firefox, but the .ANI cursor that I have, that has a spinning recycling circle does show up. In IE it shows up fine, but then also in IE the .PNG doesn’t show up?

    What do I need to do in my CSS external sheet to get both browsers to render properly?

    Both of my cursors are stored in my directory under:

    ../Images/Cursors/Links.ani and Default.png

    And that is pretty much their url address within the CSS cursor rule, without the ‘and’ and in their respective tags of course. If .ANI’s work in Firefox, then why isn’t mine? My website is here:

    http://www.wku.edu/~markanthony.echipare/5.0/Index/_index.php

    Thanks

  5. estellevw says:
    August 19, 2008 at 2:49 pm

    I never alter the cursor, so haven’t tested this stuff out since i wrote this blog entry eons ago. However, I think you may need to convert your .png to a .cur for IE support, and for Firefox support you need to add in the required default keyword. the third bullet in the notes is actually a requirement, not a suggestion according to the w3c – http://www.w3.org/TR/css3-ui/#cursor and mozillahttp://developer.mozilla.org/en/docs/Using_URL_values_for_the_cursor_property

  6. BSM says:
    August 20, 2008 at 3:46 pm

    I was thinking that with IE. But I also found out that FireFox dropped support of .ANI cursor after 2.0. So I am currently on the hunt for a possible Javascript solution. I’ll probably go static though if I can’t find anything. Thanks for the reply.

  7. rajakvk says:
    February 25, 2010 at 8:15 am

    Nice trick. I tried to modify my userContent.css (Firefox), but couldn’t see the effect. By the way, is there any way to point any file in the c:\windows\cursor folder.

    I tried with this

    a {cursor:url(file:///C:/WINDOWS/Cursors/banana.ani);}

  8. Pingback: Navigating Your Computer via Keyboard (for Creating Dragon Commands) — Speakeasy Solutions Blog