New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1.5+ IE8+

Custom Cursor Script

Author: Dynamic Drive

Description:Using CSS, you can specify your own image for the browser to use as the cursor! The image will replace the default "arrow" one. Properly done, a custom cursor can bring furthered consistency to your site's design.

Note that the image must be of the type .ico for maximum browser compatibility. In FF and Chrome, you can utilize a .png file, though the format unfortunately isn't supported in IE as of IE11.

Demo: You should see a custom cursor in place of the default arrow one for the BODY of the element.


Directions: Simply add the below style sheet to the HEAD section of your page to change the default BODY cursor with a custom one instead. Change BODY to antoher element if you wish the custom cursor to target a more specific set of elements, such as links only (A):

Select All

where "mousecursor.ico" is the name of your cursor file and in the same directory as where the page resides. You can change the keyword "BODY" to localize the cursor to a subelement within the page, such as "P". Here is the ico used in the demo in PNG format:

Creating the custom cursor

Ok, so you're probably sweating it right now on how to create the actual cursor file. You can search sites like IconFinder to locate a suitable .ico image, or what I prefer to do is first create an icon in .png format, then convert it to .ico using an online converter such as this one.

Have fun!