[CSS] Custom cursors

[tm]

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:

    cursor: url(url/to/custom/cursor.ico), url(../url/to/custom/cursor), default;

let me go through this step by step.

 url(url/to/custom/cursor.ico)

This bring up the custom cursor file from the URL specified.

 url(../url/to/custom/cursor.ico)

is a hack for other browsers.

default;

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!

 

[wvccboy]

nice tip! Rep added

 

[tm]

No problem

 

[PoorDoggie]

On 6YD I had a cursor problem. I wanted to have an "onClick" in a div but without using a link. To make it look like a link I used this code:

style="cursor: hand;cursor: pointer;"

That will bring up the default link cursor. There are also a load of other default cursors (I don't know off the top of my head) but you can use them like that!

Hope this adds to your informative thread nicely! Thanks for the info though, it could come in useful at some point. I remember trying in vain to find out how to do that!

 

[tm]

Yep,

Here is the list:

Default | pointer | Crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress

Thanks for your extra info