css - change color of the cursor

Question

I am trying to apply style to the cursor. Below is the code

 <span style="cursor:help ; color:red; font-size:40px;">Help</span><br>

When i tried color:red it changed the text 'Help' to red color. How to make the cursor red?

Here is the fiddle - https://jsfiddle.net/user_123/aoubt7yv/

Please help. Thanks in advance.

Answer 1

Cursors aren't really stylable like you might expect at least not using properties that would traditionally target DOM elements.

The best approach would be to set the cursor attribute to a URL that contains your preferred cursor as seen below :

/* This will change your cursor to the image at your URL */
cursor: url('{your-red-cursor-url}'), auto;

Example

.red-cursor {
  color:red; 
  font-size:40px;
  cursor: url('http://www.spacebug.50webs.com/visible.gif'), auto;
}

<div class='red-cursor'>
    Testing
  </div>

Answer 2

You will probably need to do it as an image as color is for changing the color of text.

You can try an image like this:

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

Answer 3

Try replacing the custom cursor image with an image with red background.

 <span style="cursor:url('put-red-image-here'), auto ; font-size:40px;">Help</span><br>

You could use JavaScript, but I believe this is a simpler option.