Increase cursor size in HTML body

Question

Is there any way to programmatically increase the size of the cursor in a browser based application using CSS or jQuery?

I can change the type of cursor with CSS like so...

body {
    cursor: crosshair;
}

but I see no provision in CSS to increase the size of the cursor.

Answer 1

there is no property regarding size of cursor but still you can use custom cursors, the trick behind this is to hide real cursor while show custom image. You can find more about this here Create Custom cursors

edit: above link is dead, it's still found on wayback machine: https://web.archive.org/web/20170605131602/http://www.ajaxblender.com/howto-create-custom-image-cursors.html

Answer 2

You can't increase the size of the default cursor using CSS or jQuery.

But you can replace the cursor with the custom image of any size using pure CSS by cursor:Url() property.

This is pure CSS and no need of Javascript/jQuery hack for this.

For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url

Answer 3

There is virtually NO statement to increase size of the cursor. A way out of this is to use the cursor: url(...); statement to replace the cursor. Make the custom cursor a to the size you want using various apps, and make sure that the '.cur' extension is there.