CODEWITHSUNDEEP
htmlcssmouse-cursor
Briguy37
Briguy37

Reputation: 8402

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!

Upvotes: 9

Views: 4088

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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.

Upvotes: 9

Related Questions