CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
lekha pillai
lekha pillai

Reputation: 45

How to make cursor style to circle using html or javascript

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?

Upvotes: 2

Views: 6810

Answers (4)

Payer Ahammed
Payer Ahammed

Reputation: 907

You can use CSS cursor wait

div {
    cursor: wait;
}

or 

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

Upvotes: 0

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4463

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>

Upvotes: 3

Bharath S
Bharath S

Reputation: 374

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"

Upvotes: 0

Shahzad
Shahzad

Reputation: 620

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/

Upvotes: 0

Related Questions