CODEWITHSUNDEEP
htmlcss
user56690
user56690

Reputation: 259

css - change color of the cursor

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.

Upvotes: 12

Views: 29448

Answers (3)

Rion Williams
Rion Williams

Reputation: 76547

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

enter image description here

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

Upvotes: 10

Sarhad Salam
Sarhad Salam

Reputation: 438

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.

Upvotes: 2

Andy Holmes
Andy Holmes

Reputation: 8047

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; }

Upvotes: 4

Related Questions