It's surprisingly easy to do custom cursors in CSS.
It's all controlled under the property cursor:
pointer is a hand (like hovering on a link) - useful for javascript OnClick links when the hand never happens.
default is just the original old cursor.
crosshair is a + symbol. Not very attractive.
Others include:
move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress
Which are pretty self-explanitory. (North East, north west, etc for the resize icons).
So how do you do a custom cursor?
put in your div/class/whatever:
Code:
cursor: url(url/to/custom/cursor.ico), url(../url/to/custom/cursor), default;
let me go through this step by step.
Code:
url(url/to/custom/cursor.ico)
This bring up the custom cursor file from the URL specified.
Code:
url(../url/to/custom/cursor.ico)
is a hack for other browsers.
justs makes the cursor default for unsupported browsers.
So how to make a .ico file?
Simple really. Make a 16x16 (max) file, decorate it or whatever and then save it as .gif (.ico if available). Then rename the .gif to .ico. Then call it in the css file.
Enjoy!
