Picnic Website Code Tutorials

How To CSS Custom Cursor Tutorial

This code will give you your custom cusor of your choice. You can place it in the <head> or your .css. It works "almost" perfectly in IE7, IE6, Firefox, and Safari. Unfortunately, this does not work in Opera. Trust me, I scowered the web - this is the closest to perfect pure css method you will find. Because of browser limitations, it's still a little buggy. You will still need to go out and find your cursor images though. I found mine at google images. Then, just link to the images as shown in the code below.

Firefox and Safari need a keyword after the url in order to display the cursor image - IE does not. In this case, "auto" works perfectly! For IE, the image file extension needs to be a .cur or .ani. Firefox and Safai will only recognize .cur. The a:active (wait) cursor will only display correctly in IE because of the way it treats a:active.

body {
cursor: url("images/arrow.cur"), auto;
a, label, .submit {
cursor: url("images/hand.cur"), auto;
a:active {
cursor: url("images/wait.ani"), auto;
p, h1, h2, h3, h4 { 
cursor: url("images/text.cur"), auto;

Need help adding this or other code to your website? Post it here in the forum! Forum


Top Donators

Friends of Mine