Is it possible to change the color of the mouse cursor via CSS?

Color is not possible.

However you can change the mouse pointer with CSS:

.novoCursos {
   cursor: url(ponteiroVermelho.gif), auto;
}

The html code looks like this:

<div class='novoCursos'>Ola, coloque o mouse em cima dessa frase para ver o cursor alterar.</div>

Just to add another cool information I found (and a working example!), I decided to create this answer. :)

From this OS thread ( en) , I learned that it is also possible to embed the cursor directly in the CSS via the encoding of the image data used in base64 . With the help of online tools such as this or this , a submitted cursor image can be easily converted into a string of encoded data.

I used the following images in PNG format, created from of this free-use document : / p>

I coded each one using one of the tools mentioned, and I used the following syntax to define the cursors:

cursor: url(data:image/png;base64,iVBORw0KG...), auto;

This example in JSFiddle contains the encoded data of each of the above cursor images and lets you test how this suggestion works.

The main advantage I imagine of this use is precisely to reduce the number of resource requests to the server. Looking for more in this respect I found that other thread in the OS who has a very nice answer regarding the care / limitations of this approach. Translating freely below:

  

This is a good practice commonly used only for small images in   Which will be used together (such as sprites ), when the   Compatibility with IE does not matter much and especially when   saving on requisitions is more important than "cacheability"   (images in this format are not cached by the browser).

     

It has a significant number of negative points:

     

• Does not work at all in IE6 and IE7.
  
• Works for features up to 32k in size in IE8. This is the limit that applies to the encoding of the representation after encoding in   base64, that is, strings larger than 32,768 are not allowed   characters.
  
• Save on request, but load HTML page! And prevents the cache of images. They are loaded every time the page or CSS contains   the encoded string is loaded.
  
• Base64 encoding increases the size of the images by 33%.
  
• If you use a resource that compressed with gzip, this will cause a considerable cost on the server! Images traditionally use   too much CPU to be compressed, with little compression in size.
  

EDIT: I did some testing here (windows 8.1 64bits) with the example JSFiddle. It worked perfectly in Chrome (32.0) and Firefox (26.0), but did not work in IE11.

EDIT2:

The @LeandroAmorim response solution does not work in IE11 even if a URL is given directly to a png or gif file. After much searching, I noticed that for this to work in IE the image used must be in .cur or .ani format (this indication of need to use the "cursor" format for IE is in the CSS 2.1 referred to in the @Kazzkiq response).

As the cursor format is accepted by other browsers, to work in general ( cross-browser ) it is always necessary to use this format instead of png or gif.

It's quite easy to get the files in .cur format:

cursor: url(red_pointer.cur), auto;

I just could not use the cursor in the approach to include the data encoded in base64. Probably because I do not know how to identify the type of data format ( data:image/x-icon and data:image/png do not work ...). If anyone knows how to do it, I would appreciate it. :)

Unfortunately, the cursor is a property of the OS itself (Windows, Linux, Apple). Through CSS, you can change the type of the cursor, but not the color of it, because the color is defined in the OS settings.

That's why the solutions you've seen did just that - hide the cursor, and replicate it in a JavaScript and / or CSS-controllable way.

Update

As stated in some other answers, you can use your own cursor, using the url attribute, and using a .cur or .gif .

cursor:url('cursors/cursor.cur');

Some information (in English) can be found here , also explaining some methods of ensuring 'cross-browser compatability'.

Changing only the color is not possible, however, from CSS 2.1 / a> it is possible to replace the cursor with an icon:

body{ /*pode qualquer seletor válido*/
    cursor:url(cursor.gif), auto;
}

The option auto is used if the image passed in the url parameter has an error and is not loaded.