Increase Cursor Size in HTML Body

Increase cursor size in HTML body

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

How to increase size of custom cursor image?

You can combine css + jQuery if necessary, even if combining them is not always perfect:

JSFiddle example:

http://jsfiddle.net/n4Zbr/258/

Local example:

$(function(){  var $cursor = $('#huge-cursor');  $(document).bind('mousemove',function(e){    $cursor.css({      left: e.clientX - 15,      top:  e.clientY - 15,    });  });});

body, html {  width: 100%;  height: 100%;  margin:0; padding:0;  cursor: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"), auto;}#huge-cursor {  position: fixed;  border-radius: 10% 90% 50% 50% / 10% 50% 50% 90%;  background: yellow;  width: 200px; height: 200px;  border: 4px solid pink;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="huge-cursor"></div><br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT

How to reduce the size of image with cursor url?

Unfortunately you can't reduce the size of the cursor. You need to reduce the size of the image. 36 * 36 px is the recommended size.

Some more useful information here https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#syntax

is it possible to change cursor shape and size?

Yes, changing cursor shape and size is possible through javascript as well as CSS3. Check out these resources, they have some great information to get you started.

http://www.w3schools.com/cssref/pr_class_cursor.asp
http://www.javascripter.net/faq/stylesc.htm

Here is a snippet from another SO user (Dynamically change cursor size)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>

<div id="hold">

  <canvas id="canvas" width="500" height="500"></canvas>

  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);

  this.r = 25; // Radius of circle
  this.x;
  this.y;

  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};

</script>
</body>
</html>

Dynamically change mouse cursor size

You can do that fairly easily with canvas.

Placing the element that is going to receive clicks over the canvas.

Tracking the mouse position on the top layer (the element to receive clicks) and using those mouse positions to draw on the canvas below.

Here is some code I made for you:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>

<div id="hold">

  <canvas id="canvas" width="500" height="500"></canvas>

  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);

  this.r = 25; // Radius of circle
  this.x;
  this.y;

  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};

</script>
</body>
</html>

CSS Body Cursor or Dragging Cursor

Well, either use html instead:

html { cursor:wait }

on JSFiddle

or set height: 100% on both html and body:

html, body {
  height: 100%;
}

body {
  cursor:wait
}

on JSFiddle

Increase Cursor Size in HTML Body