How to make cursor style to circle using html or javascript

Question

I'm building a drawing app, and I want a cursor in form of circle. I searched HTML5 style to make cursor default, pointer etc, but I need it to be a circle. How can I do this?

score 3 · Accepted Answer · answered Jun 28 '15 at 16:59

What you want can be done by CSS.

Check out the following snippet and this jsfiddle

#circle64 {
  cursor: url('http://www.iconsdownload.net/icons/64/16574-black-circle.png'), pointer;
}
#circle32 {
  cursor: url('http://www.iconsdownload.net/icons/32/16574-black-circle.png'), pointer;
}
#circle24 {
  cursor: url('http://www.iconsdownload.net/icons/24/16574-black-circle.png'), pointer;
}

<div id='circle64'>
  Cursor will
  <br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle32'>
  Cursor will
  <br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle24'>
  Cursor will
  <br>be</br>different here.
</div>

Shahzad · Answer 2 · 2015-06-28T16:46:06.000

0

you can use an image as cursor, by using this css property

cursor: url(images/my-cursor.png), auto;

for example if you have some input and you want to show round cursor on it , you should use png image

input{
cursor: url(images/my-cursor.png), auto;
}

check this jsfiddle http://jsfiddle.net/pwy51Ly8/

edited Jun 28 '15 at 16:46

answered Jun 28 '15 at 16:34

Shahzad

550
1
6
24

you need to use image as cursor for example image like this http://s30.postimg.org/q2s76q6u5/Reload_arrow_32.png – Shahzad Jun 28 '15 at 16:46

score 0 · Answer 3 · edited Jun 28 '15 at 19:58

0

You can use CSS cursor wait

div {
    cursor: wait;
}

or

div {
 cursor: url("your custom cursor image"), auto;
}

edited Jun 28 '15 at 19:58

Rodrigo Taboada

2,727
4
24
27

answered Jun 28 '15 at 16:38

Payer Ahammed

887
1
5
16

cursor :wait is not matching need, i tried loading image, but nothing happens – lekha pillai Jun 28 '15 at 16:42
1

You can use animated gif or any png file in cursor:url(your png or gif) – Payer Ahammed Jun 28 '15 at 16:44
make sure your given url is currect exampe: cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto; – Payer Ahammed Jun 28 '15 at 16:55

score 0 · Answer 4 · edited May 23 '17 at 12:07

0

From this link "It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px"

edited May 23 '17 at 12:07

Community

1
1

answered Jun 28 '15 at 16:57

Bharath S

364
4
10

How to make cursor style to circle using html or javascript

4 Answers4