How to make a cursor contrast with the background?


For the browsers I’ve tried (Chrome, Firefox, and IE), the built in crosshair cursor changes to white when it is over a black image and black when it is over a white image. Is there a way to make custom cursors that do this?

div {
  height: 100px;
  width: 100px;
  border: 1px solid black;

.black {
  background-color: black;

.white {
  background-color: white;

.crosshair {
  cursor: crosshair;
<div class="black crosshair"></div>
<div class="white crosshair"></div>

Original fiddle.

Thanks much!


The CUR file format is explained in reasonable detail here. In particular, it mentions the following:

A monochrome (1-bit) icon or cursor will contain only four possible pixels values: black, white, transparent, and inverted. A transparent or inverted pixel may be either black or white in color. The color palette will contain only two colors, which are black (entry zero) and white (entry one). The transparent color is the original color of the display pixels. Inverted is the inverse color of the display pixels.

Answered By – Niet the Dark Absol

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.